使用css Flexbox实现垂直居中

CSS布局对咱们来讲一直是个噩梦，咱们都认为flexbox是咱们的救世主。是否真的如咱们说说，还有待观察，可是flexbox确很是轻松的解决css长久一来比较难解决的居中问题。让咱们来看看到底有多容易：

垂直居中须要一个父元素和子元素：

<div class="flexbox-container">
      <h1>Hello World</h1>
      <div>Blah blah blah blah blah ...</div>
        
</div>

可是只有父元素须要CSS属性来设置子元素垂直居中：

.flexbox-container {
    display: -ms-flexbox
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

除了特定的前缀，真的很是简单的CSS!

DEMO