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

如果父级宽度为1000像素且子级为100像素，则浏览器会将问题中的规则解释为：

示例1：

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

示例2：

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

Answer 2

left 50%会将元素精确地移动到此元素所属的主容器的中心！但是translateX(50%)会将元素精确地移动到其宽度的50％，并且 NOT 在整个Container元素的中心！

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

清除这一点的一般示例：(fiddle here)：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: