Почему "left: 50%, transform: translateX (-50%)" горизонтально центрирует элемент?

Недавно я отредактировал некоторые из моих CSS и был приятно удивлен, когда нашел более простой способ горизонтального выравнивания моего абсолютно позиционированного элемента:

.prompt-panel {
    left: 50%;
    transform: translateX(-50%);
}

Это отлично работает! Даже если моя ширина элемента авто. Однако я не понимаю, что происходит, чтобы это действительно работало. Мое предположение заключалось в том, что translateX был просто современным, более эффективным средством перемещения элемента вокруг, но это, похоже, не так.

Не должны ли эти два значения отменить друг друга? Кроме того, почему

.prompt-panel {
    left: -50%;
    transform: translateX(50%);
}

не показывать тот же результат, что и первый фрагмент кода?

Ответ 1

Свойство CSS left основано на размере родительского элемента. Свойство transform основано на размере целевого элемента.

Имя: transform

Проценты: укажите размер ограничивающей рамки [элемента, к которому применяется стиль)

http://www.w3.org/TR/css3-transforms/#transform-property

'сверху'

Процент: см. высоту содержащего блока

http://www.w3.org/TR/CSS2/visuren.html#position-props

Если родительский 1000px широкий и ребенок 100px, браузер будет интерпретировать правила в вашем вопросе как:

Пример 1:

.prompt-panel {
    left: 500px;
    transform: translateX(-50px);
}

Пример 2:

.prompt-panel {
    left: -500px;
    transform: translateX(50px);
}

Ответ 2

left 50% будет перемещать элемент точно в центр основного контейнера, в который входит этот элемент! НО translateX(50%) будет перемещать элемент точно ровно до 50% его ширины и НЕ в центре всего элемента Контейнера!

Это основное различие между ними, и именно поэтому этот пример имеет отличия!

Общий пример, чтобы прояснить это: (скрипка здесь):

#pos
{
    border:1px solid black;
    position:absolute;
    width:200px;
    height:150px;
}
#pos-2
{
    border:1px solid black;
    position:absolute;
    width:auto;
    height:150px;
}
.prompt-panel {
 position:absolute;
}

.prompt-panel1 {
    position:absolute;
    left: 50%;
}
.prompt-panel2 {
    position:absolute;
    left: -50%;   
}
.prompt-panel3 {  
     position:absolute;
     transform: translateX(-50%);
}

.prompt-panel4 {  
     position:absolute;
     transform: translateX(50%);
}
.prompt-panel5 {  
     position:absolute;
     left: 50%;
     transform: translateX(-50%);
}
.prompt-panel6 {  
     left: -50%;
      transform: translateX(50%);
}
#pos-auto
{
    position:absolute;
}

<div><b> With fixed width 200px</b></div>
<br/>
<div id="pos">
<div class="prompt-panel">panel</div>
<br/>
<div class="prompt-panel1">panel1</div>
<br/>
<div class="prompt-panel2">panel2</div>
<br/>
<div class="prompt-panel3">panel3</div>
<br/>
<div class="prompt-panel4">panel4</div>
<br/>
<div class="prompt-panel5">panel5</div>
<br/>
<div class="prompt-panel6">panel6</div>
</div>
<br/><br/><br/> <br/><br/><br/><br/><br/><br/>
<div><b> With fixed width auto</b></div>
<br/>
<div id="pos-2">
<div class="prompt-panel">panel</div>
<br/>
<div class="prompt-panel1">panel1</div>
<br/>
<div class="prompt-panel2">panel2</div>
<br/>
<div class="prompt-panel3">panel3</div>
<br/>
<div class="prompt-panel4">panel4</div>
<br/>
<div class="prompt-panel5">panel5</div>
<br/>
<div class="prompt-panel6">panel6</div>
</div>