绝对定位的盒子实现水平居中

绝对定位的盒子实现水平居中

像这样，如果盒子设置了绝对定位之后想要居中，那怎么办呢？这个时候使用margin:0 auto；肯定不起作用，我们需要给盒子添加向左移动游览器可视窗口的一半，即left:50%;这时候盒子移动如下图，偏右边一点。

这时候需要将盒子添加左margin盒子大小的一半即可，即margin-left:100px;效果如下图；

接下来附上代码：

html
div {
            position: absolute;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
        }

如果之前设置了margin，需要把之前的margin清楚掉再设置margin-left。 如果水平和垂直方向一起居中就实现了盒子的居中。

div {
            position: absolute;
            /* 水平居中  */
            left: 50%;
            margin-left: -100px;
            top: 50%;
            /* 垂直居中  */
            margin-top: -100px;
            width: 200px;
            height: 200px;
        }