Positioning происхождения CSS

Question

Я замечаю, когда позиционирование в CSS:

.image { 
    position: relative; 
    top: 10%; 
    left: 50%; 
} 

"происхождение" всегда верхний левый. Есть ли способ изменить это происхождение, чтобы сказать центр?

Answer 1

№ Возможные значения абсолютного/относительного/фиксированного позиционирования: top, left, bottom, right.

Answer 2

No.

Ключ к пониманию того, как эти свойства работают с относительным позиционированием, чтобы понять, что они определяют край, что движение применяется к, а не по направлению движения.

Другими словами, верхнее свойство сдвигает поле относительно его верхнего края, свойство слева сдвигает поле относительно его левого края и т. Д. Коробка сдвигается от указанного края, поэтому верх: 1ем сдвигает коробку 1м от верхней позиции, другими словами, вниз. Отрицательные числа сдвигают поле в противоположном направлении, поэтому снизу: -1em совпадает с верхним: 1em.

Источник:W3 org Wiki

Альтернатива использует CSS3 преобразования.

по умолчанию происхождение (трансформационное происхождение) для трансформаций center center.

Answer 3

Установка top и left объектов на .image вы устанавливаете положение левого верхнего угла относительно его нормального положения;

в относительном позиционированном блоке внутри обертки, который будет одним и тем же источником родителя-обертки (если нет других узлов-братьев, которые влияют на позицию);

установка top:50%; left:50% вы перемещаете начало координат в центр родителя.

Если вы хотите, чтобы исправить происхождение, чтобы быть центром изображения, которое вы можете использовать transform:translate(-50%,-50%) (это позиционирование по отношению к ширине/высоте .image)

вот пример:

.image { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    height:200px; 
 
    width:200px; 
 
    background:red; 
 
    transform:translate(-50%,-50%) 
 
} 
 

 
section{ 
 
    width:100%; 
 
    height:600px; 
 
    border:1px solid; 
 
}

<section> 
 
    <div class='image'></div> 
 
</section>

Answer 4

$(window).on('resize', function() { 
 
    $('.img_name').css('margin-top', function() { 
 
     return ($(window).height() - $(this).height())/2 
 
    }); 
 
}).resize();

.img_name{width:150px;margin:0 auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="img_name"><img src="https://i.stack.imgur.com/RN9nh.png?s=328&g=1" width="150px" alt="" /></div>

использовать это поддержка всех видовых экранов.