Image not centered with 50%

Question

I have an image set to left: 50%;. However, it's a little too far to the right, like the selector is not in the center, but on the left side.

My CSS Code:

#scroll-down {
  position: fixed;
  width: 100%;
  height: 64px;
  margin-top: -64px;
}

#scroll-arrow {
  position: absolute;
  background: url("img/down-arrow.png") center no-repeat;
  width: 64px;
  height: 64px;
  left: 50%;
}

My HTML Code:

<div id="scroll-down">
  <div id="scroll-arrow"></div>
</div>

Answer 1

To make the image exactly placed on center, you need to put some margin-left with value is minus half of your image width.

Please try this example

#scroll-down {
    position: fixed;
    width: 100%;
    height: 64px;
}

#scroll-arrow {
    position: absolute;
    background: url("http://placehold.it/100x100") center no-repeat;
    width: 64px;
    height: 64px;
    left: 50%;
    margin-left: -32px; /* value -32px comes from (width / 2 * -1) */
}

<div id="scroll-down">
    <div id="scroll-arrow"></div>
</div>