为什么“left：50％，transform：translateX（-50％）”水平居中元素？

Question

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

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

这很好用！即使我的元素的宽度是自动的。但是，我不明白发生了什么才能使它真正起作用。我的假设是 translateX 只是一种现代的、更高效的移动元素的方法，但事实并非如此。

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

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

与第一个代码 sn-p 显示的结果不一样？

Answer 1

left 50% 会将元素移动到该元素所属的主容器的中心！ 但是translateX(50%) 会将元素向右移动到其宽度的 50%，并且 NOT 位于整个 Container 元素的中心！

这就是它们之间的主要区别，这就是为什么这个例子有区别！

清除此问题的一般示例：(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>

Answer 2

CSS left 属性基于父元素的大小。 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);
}