爲什麼「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

如果父是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％，並且不是位於整個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>