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

稍加修飾，最後的效果：