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

             對於水平居中的屬性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