做一個小專案，有這樣一個需求，站點的標題欄顯示標題的時候，想讓標題在父佈局中居中顯示，就像如下

在css3之前有這樣一個屬性可以控制文字的顯示效果

text-align : center

但實際前框並不是想象的那樣，原始碼如下

<div style="
    width: 100%;
    height: 100px; 
    background-color: black;
    text-align: center;
    color: white; 
    font-size: 30px" 
>
    this is title
</div>

效果如下

剛才說了那只是css3之前的方法，也就是說text-align:center只能對水平居中有效，不能垂直居中。

OK，CSS3新特性可以做到水平垂直居中，先看原始碼吧！

<div style="
    width: 100%;
    height: 100px;
    background-color:
    gray;color: white;
    font-size: 30px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
 
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;"
   >
       this is title
</div>

效果如下

在CSS3垂直居中方法如下：

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;