垂直水平居中的几种常用方案

垂直水平居中的方案有很多，有时候容易搞混。
其实细分下来主要有两种场景：元素宽高未知的场景、元素宽高已知的场景。针对这两种情况，后文分别列出集中主流的垂直水平居中方案。

元素宽高未知的场景

table 实现垂直水平居中【推荐】

table垂直水平居中方案，是万金油方案，适用性极强，也没有兼容性问题；缺陷是会增加冗余的HTML结构。

    

        haha
    


.vertical {
    width: 100%;
    height: 100%;
    display: table;
}
.vertical.center {
    text-align: center;
}

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

.vertical .box-container .box {
    vertical-align: middle;
}

transform 实现垂直水平居中【推荐】

transform垂直水平居中方案，同样也是万金油方案，尤其适合移动端；缺陷是只支持IE9及以上的浏览器。

haha

// transform是以自身宽高为基准计算的
.box {
    position: relative; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);    
}

flexbox 实现垂直水平居中

移动端可以使用；缺陷是只支持IE10及以上的浏览器。

    


// transform是以自身宽高为基准计算的
.box-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

元素宽高已知的场景

绝对定位 实现垂直水平居中

比较常用的方案，需要已知宽高。

    


.box-container{
    position: relative;
}
.box-container .box {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

margin:auto 实现垂直水平居中

特别适合自身有宽高的元素，比如图片等；但是对于其他元素，仍然需要显式设置宽高。

// 图片等自身带宽高的元素，直接 margin: auto; 即可

    


.box-container{
    position: relative;
}
.img {
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;
}

// 其他场景需要显式设置宽高

    

.box-container{
    position: relative;
}
.box {
    width: 100px;
    height: 100px;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;
}