left:50%的元素没有出现在页面中间

Question

我有一个绝对定位的弹出窗口(悬停在"冰白"图像上看弹出窗口),其中有css离开:50%.现在这应该出现在页面中间但不是.有什么建议吗？提前致谢.

Answer 1

您还应该添加margin-left元素可见宽度的一半的负数.所以,例如:

width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;

请注意,margin: auto其他人建议不会起作用,因为您已经绝对定位了该元素.

Answer 2

 position: absolute;
 left: 50%;
 transform: translate(-50%,0)