CSS水平垂直居中布局

水平垂直居中布局

HTML结构如下所示

<div class="parent">
    <div class="child">demodiv>
div>

1. [inline-block + text-align] + [table-cell + vertical-align]

前半部分实现水平居中，后半部实现垂直居中

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display: inline-block;
}

• 优点：兼容性很好，可兼容至IE6(*zoom)

2. [table + margin] + [table-cell + vertical-align]

把水平居中的方式变换一下

.parent {
    display: table-cell;
    vertical-align: middle;
}
.child {
    display: table;
    margin: 0 auto;
}

• 优点同上

3. [absolute + transform]

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}

• 优点：使子元素脱离文档流但是依然能相对父元素居中，可以用来设置弹窗等模块
• 缺点：兼容性问题，可能需要添加浏览器前缀

4. [flex + justify-content + align-items]

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

• 优点：只需在父元素上设置样式即可，代码简单
• 缺点：除了兼容性问题还有性能问题，可以应用在小范围中

总结

水平垂直居中不是简单的组合水平居中和垂直居中，需要考虑实际环境和兼容性问题
比如说水平用[table + margin]，垂直用[flex + align-items]由于两个的兼容性差距巨大，[table + margin]原本具有的兼容性优势就体现不出来了，显得不伦不类。