CSS水平垂直居中方法总结

平时在做项目的时候，会遇到让元素在水平方向和垂直方向同时居中的情况，典型的例子就是弹出框（点击某个按钮，出现弹出框）。要实现这个需求，用css就可以完全控制，非常方便。

方法一

这个方法是同事告诉我的，用的是table布局，也就display:table，相对来说是种旧的方式。

HTML:

<div class="fixBox"> （fixBox是为了实现弹出框悬浮）
    <div class="box1">
        <div class="box2">
            <div class="box"></div>
        </div>
    </div>
</div>

CSS:

.fixBox{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.box1{
    display:table;
    width:100%;
}

.box2{
    display:table-cell;
    vertical-align:middle;
}

.box{
    margin:0 auto;
}

这样可以让box元素居中，但是比较复杂，要套很多层标签，显得有些复杂。（不推荐使用）

方法二

采用定位的方式，也就是position:absolute

HTML:

<div class="box"></div>

CSS:

.box{
    width:400px;
    height:400px;
    position:absolute;  让元素绝对定位
    left:50%;           设置定位的位置距离左、上都为50%
    top:50%;
    margin-left:-100px; 设置元素的左外边距、上外边距都为宽高的负1/2
    margin-top:-200px;
}

这种方法兼容性好，但是有个前提是必须要知道水平垂直元素的宽高。

方法三

方法三跟方法二相类似，需要变换的只是不需要设置外边距，而是使用CSS3的transform

将margin都去掉，换成transform:translate(-50%,-50%),设置元素相对于自身偏移负50%，也就是自身尺寸的一半

这种方法因为使用CSS3的样式，所以兼容性不好，但是用起来很方便。

方法四

方法四跟方法二也很类似，同样使用绝对定位，也需要用到margin值，只不过需要改变一下位置距离的值。

HTML:

<div class="box"></div>

CSS:

.box{
    width:400px;
    height:400px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

如果想兼容低版本的浏览器，可以采用方法四，因为不需要用到CSS3的样式，同时对于元素的宽高也不是必须要知道的。

每种方法都有自身的优缺点，在平时的开发中，根据实际情况以及需求来决定具体应用哪一种方法。

赏

谢谢你请我吃糖果