使用flexbox简单实现垂直居中布局

垂直居中一直是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

稍加修饰，最后的效果：