CSS垂直居中布局解决方案

垂直居中布局解决方案

HTML结构如下

<div class="parent">
    <div class="child">demo</div>
</div>

1. table-cell + vertical-align

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

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

2. absolute + transform

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

• 优点：脱离文档流，不占据文档空间
• 缺点：兼容性问题，不支持IE678，其他浏览器可能需要加前缀

3. flex + align-items

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

• 优点：简单易用，只需设置父元素
• 缺点：flex兼容问题和性能问题，可以小范围应用