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