前言：在很多情況下，我們要使用到內容的居中，這裡的居中包括了垂直居中和水平居中，下面來淺談一下

             對於水平居中的屬性text-align和垂直居中屬性vertical-align的理解

            （1）text-align

               如果要實現水平居中，比如我們要實現塊狀元素(block)內，子元素的水平居中

                <div class="div1">
                         <div class="div2">

                        </div>
                </div>

                比如我們要實現div2元素在父元素div1內的居中，我們則會有：

                .div2{

                    display:inline-block

                 } 

                並且要設定父元素的屬性即：

                .div1{

                    text-align:center

                 }

                實現效果為：

                 關鍵：要實現這種水平居中，在設定父元素具有text-align:center屬性的基礎上，必須設定子元素（要居中 

                 的元素）的display:inline-block或者display:inline，即只能實現行內塊的水平居中。

                （2）vertical-align

                  這裡簡單的說一下，vertical-align屬性實現垂直居中

                 <div class="div1">
                         <div class="div2">

                        </div>
                </div>

       要實現div1父元素內的子元素div2，讓div2實現垂直居中，我們可以這樣設定：

                 .div1{

                     display:table-cell;

                     vertical-align:middle;

                  } 

 實現的效果為：

                注：簡單的實現垂直居中，我們可以發現並不需要對子元素進行特殊設定，我們只需要設定父元素的

                display:table-cell;vertical-align:middle  之後就能實現垂直方向的居中。（這種方式實現的垂直居中，會

                導致水平不居中）

              (3)補充

               1.父元素設定屬性為text-align:center,並設定子類快為inline-block那麼，子類3個塊都會實現水平居中

               2.父元素設定為line-height:= height: 並設定子類塊屬性為inline-block，那麼子類的所有都能實現垂直居中

               3.對於text-align:center,如果父類元素的display:inline-flex，則子元素不能實現水平居中

              2017.1.13補充，line-height:100px設定行高，此時給定了基線，此時如果要實現居中，只需要讓基線居中，                通過設定vertical-align:middle