为什么"left:50%,transform:translateX(-50%)"水平居中一个元素？

Question

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

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

这很棒!即使我元素的宽度是自动的.但是,我不明白是什么让它真正发挥作用.我的假设是,translateX只是一种现代的,更高效的移动元素的方法,但事实并非如此.

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

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

没有显示与第一个代码段相同的结果？

Answer 1

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

Answer 2

left 50%将元素精确地移动到该元素所属的主容器的中心!但是translateX(50%)将元素精确地移动到其宽度的50%,而 不是整个Container元素的中心!

这是他们之间的主要区别,那就是为什么这个例子有差异!

清除这一点的一般例子:( 在这里小提琴):

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