我最近重构了我的一些CSS，并惊喜地发现一个更简单的方法来水平对齐我绝对定位的元素：
.prompt-panel {
left: 50%;
transform: translateX(-50%);
}
这个很棒！即使我的元素的宽度是自动的。但是，我不明白发生了什么事情才能真正奏效。我的假设是，translateX只是一个现代化，更有效的移动元素的手段，但似乎并非如此。
这两个值不应该相互抵消吗？此外，为什么
.prompt-panel {
left: -50%;
transform: translateX(50%);
}
解决方法
CSS left属性基于父元素的大小。 transform属性基于目标元素的大小。
Name: transform
Percentages: refer to the size of bounding Box [of the element to which the style is applied]
http://www.w3.org/TR/css3-transforms/#transform-property
‘top’
Percentages: refer to height of containing block
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);
}
