使用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

稍加修饰，最后的效果：