网络日志

如何让定位的盒子居中

普通块元素的盒子可以通过设置 margin:0 auto 来水平居中,但对加了绝对定位的盒子,这种方式是无效的。

要让绝对定位的盒子水平居中,可以这么做:

/*第一步:让盒子左侧移动到父级元素的水平中心位置*/
left: 50%;
/*第二步:让盒子向左移动自身宽度的一半(这里假设绝对定位的盒子宽度为 200px)*/
margin-left: -100px;

同理,垂直居中这么做:

top: 50%;
margin-top: -100px;