为什么“左: 50%，变换: translateX(-50%)”水平居中一个元素？

Question

我最近重构了一些CSS，并惊喜地发现了一种更简单的方法来水平对齐我的绝对定位元素：

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

这个很好用！即使我的元素的宽度是auto。然而，我不明白到底是什么让它真正起作用。我的假设是translateX只是一种现代的、性能更好的移动元素的方法，但事实似乎并非如此。

这两个值不应该相互抵消吗？此外，为什么

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

不显示与第一个代码片段相同的结果？

Answer 1

CSS left属性基于父元素的大小。transform属性基于目标元素的大小。

变换名称：

百分比:指应用样式的元素的边界框大小

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

'top‘

百分比:指包含块的高度

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);
}

Answer 2

left 50%会将该元素移动到该元素所属的主容器的中心位置！但是translateX(50%)会将元素精确地移动到宽度的50%，并且而不是位于整个容器元素的中心！

这就是它们之间的主要区别，也是这个例子有区别的原因！

解决这一问题的一个通用示例：(fiddle here)

​

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

​