Изображение не по центру 50%

Question

У меня есть изображение, заданное как left: 50%;. Однако, это слишком далеко вправо, как селектор не находится в центре, а с левой стороны.

Мой CSS код:

#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%; 
} 

Мой HTML код:

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

Answer 1

Для того, чтобы изображение точно помещается по центру, вам нужно поставить некоторые margin-left со значением является минус половина вашего изображения ширина.

Пожалуйста, попробуйте этот пример

#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>

Answer 2

Используйте transform: translate(-50%, 0) центрировать его по горизонтали.

(удален margin-top вы имели для scroll-down тоже для иллюстрации)

#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%; 
 
    transform: translate(-50%, 0); 
 
}

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

Answer 3

ширина изображения 64px так, чтобы сделать его точно в центре, left значение должно быть 50% - 32px.

Использование: calc() - CSS | MDN

calc() browser compatibility

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

 
#scroll-arrow { 
 
    position: absolute; 
 
    background: url("https://cdn2.hubspot.net/hub/31306/file-25644574-png/images/arrow_down1.png") center no-repeat; 
 
    width: 64px; 
 
    height: 64px; 
 
    left:-webkit-calc(50% - 32px); 
 
    left:-moz-calc(50% - 32px); 
 
    left:calc(50% - 32px); 
 
    border: 1px solid black; 
 
}

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