CSS垂直水平居中总结

css实现垂直水平居中的方法多种，各种方法各有优劣，查阅网上资料，自己总结于此，方便日后应用。

1. 绝对定位居中

.box {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: auto;
        width: 50%;
        height: 50%;
        margin: auto;
    }

优点：

支持跨浏览器，包括IE8-IE10.
无需其他特殊标记，CSS代码量少
支持百分比%属性值和min-/max-属性
只用这一个类可实现任何内容块居中
不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
内容块可以被重绘
完美支持图片居中

缺点：

必须声明高度
建议设置overflow:auto来防止内容越界溢出
在Windows Phone设备上不起作用

2.负外边距居中
块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半，再加上top: 50%; left: 50%;

.box{
        position: absolute;
        top: 50%; left: 50%;
        width: 200px;
        height: 200px;
        padding: 60px;
        margin-left: -130px;
        margin-top: -130px;
    }

优点：

兼容IE6，7

缺点：

不能自适应。不支持百分比尺寸和min-/max-属性设置。
内容可能溢出容器。
边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根- 据不同情况。

3. Transforms居中

.box{
        position: absolute;
        top: 50%; left: 50%;
        width: 50%;
        margin: 0 auto;
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }

优点：

内容可变高度

缺点：

IE8不支持
属性需要写浏览器厂商前缀
可能干扰其他transform效果
某些情形下会出现文本或元素边界渲染模糊的现象

4. Table-Cell居中

HTML
<div class="container">
    <div class="box">
        <div class="centent">

        </div>
    </div>
</div>

CSS
.container {
        display: table;
        width: 500px;
        height: 500px;
    }

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

    .centent {
        width: 50%;
        margin: 0 auto;
    }

优点：

高度可变
内容溢出会将父元素撑开
跨浏览器兼容性好

缺点：

需要额外html标记

5. Flex居中

.container {
        display: flex;
        flex-direction: column; /* 改变排列方向 */
        justify-content: center;
        align-items: center;
    }

优点：

内容块的宽高任意，优雅的溢出
可用于更复杂高级的布局技术中

缺点：

IE8/IE9不支持。
Body需要特定的容器和CSS样式。
运行于现代浏览器上的代码需要浏览器厂商前缀。
表现上可能会有一些问题

CSS垂直水平居中总结

推荐阅读更多精彩内容