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

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

优点：兼容性好
缺点：需要知道宽高，不够灵活

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

transform实现垂直水平居中

优点：不需要知道宽高，灵活
缺点，兼容不好，在Mobile设备上建议使用

.element {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

margin:auto实现垂直水平居中

优点：灵活切兼容性好（IE8+）
缺点：适用于本身有尺寸的元素，比如图片，对于段落等，必须显示设置其宽高

.element {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

flexbox实现垂直水平居中

优点：不需要知道宽高，灵活
缺点：兼容不好，在Mobile设备上建议使用

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

table实现垂直水平居中

优点：兼容好
缺点：增加了无用的html结构

.vertical-wrapper {
    width: 100%;
    height: 100%;
    display: table;
    .vertical {
        display: table-cell;
        vertical-align: middle;
        & > * {
            vertical-align: middle;
        }
        span {
            display: inline-block;
        }
        img {
            display: inline-block;
        }
    }
    &.center {
        .vertical {
            text-align: center;
        }
    }
}

文／齐修_qixiuss（简书作者）
原文链接：http://www.jianshu.com/p/8a35f7ab6bc9
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。