垂直居中布局解决方案
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兼容问题和性能问题,可以小范围应用