垂直居中一直是css布局中绕不去的一个坎,今天我来介绍一种可以更简单来实现的方法--CSS3弹性盒子(Flexible
Box 或 Flexbox)。注意,设为
Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
首先,设置容器为flex布局
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
}
其次,添加两个属性——align-items和justify-content
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
前者定义侧轴方向上的元素对齐,后者定义主轴方向上弹性元素的空间排布。贴张图让大家简单了解下flexbox
详情可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
稍加修饰,最后的效果: