CSS基礎之居中顯示

這些天忙完了一些項目後，終於有時間來總結一下了。本身就把作項目過程當中的體會和理解到的一些東西和你們分享一下。有錯請指正！！

在css中，元素居中顯示，是基礎也是一個小難點。咱們常常不知爲什麼老是不能把元素放在咱們想放的地方。如今我們就來總結一下一些常見的居中。至少能讓咱們解決平時開發的問題。

居中分爲三種：

• 水平居中
• 垂直居中
• 水平垂直同時居中

咱們一個一個來看，一個一個理解，解決。

1.水平居中

先來一段html代碼：

<div class="parent">
    <div class="child">
        <p>測試文本 </p>    
    </div>
</div>

而後css文件中有兩種處理方法

.parent
{
    text-align: center;
}

或者

.child
{
    width: 100px;
    margin: 0 auto;
}

這兩種方法均可以讓元素水平居中顯示。可是請注意，一個是設置的parent一個是設置的child。那他們的區別或者說優劣如何呢？
個人理解是：

• 第一種會讓該元素內部的子元素都居中顯示，有時這並非咱們想要的結果。

• 第二種是必需要設置寬度，有的同窗沒有設置寬度會發現margin 0 auto 不起做用。其實並不是這樣。只是他的默認寬度每每是繼承父元素的寬度。因此看不到效果。

  2.垂直居中

  html代碼

  
  

  
  

  測試文本

  
  

  
  

css文件處理方法：

.parent
{
    line-height：200px；
}

或者

. parent
{
    display: table;
    height: 200px;
}
. child
{
    display: table-cell;
    vertical-align: middle;
}

咱們依舊能夠看到，第一種只設置了parent元素，第二種設置了parent和child
咱們能夠這樣理解這兩種方法:

• 第一種能夠看作就是把這個div設置成一行。因爲在每一行中。內部的元素都是默認垂直居中，因此這樣就直接達到了效果。
• 第二種把parent元素display設置成塊級別的表格（table），而後再把要居中的子元素display設爲表格中的一塊（table-cell）。這樣再設置這個table-cell的vertical-align: middle;假設你直接設置一個高度，再設置vertical-align: middle;這是沒有效果的。緣由是什麼呢？首先咱們來簡單認識下vertical-align這個略神奇的元素。這個就是所謂的果凍型依賴元素。inline，inline-block，block依次能夠看作，液體，果凍，固體。而vertical-align必須用在果凍級別的元素才能生效，而table-cell就是inline-block級別（果凍級別），因此Child元素display設置爲table-cell能夠產生效果，若是有不瞭解這三種類型的，能夠去看一下這三者的區別和聯繫，再瞭解一下塊級和行級元素。這裏就不細說了。

ps：vertical-align還有不少用法，這裏再也不細講，比較多。可是要注意的是，不少用法會出現瀏覽器不兼容的問題bug較多。因此注意多瀏覽器測試。筆者上面的方法通過測試。是兼容的。

3.水平垂直同時居中

html代碼：

<div class="parent">
    <div class="child">
        <p>測試文本</p>     
    </div>
</div>

css文件內的處理方法

.parent
{
    text-align: center;
    line-height: 200px;
}

或者

.parent
{
    text-align: center;
    display: table;
    height: 200px;
    width: 500px;
}
.child
{
    width: 100px;
    display: table-cell;
    vertical-align: middle;
}

再或者

.parent
{
    line-height: 200px;
}
.child
{
    width: 100px;
    margin: 0 auto;
}

三種各有優劣勢。須要你們理解塊級元素，行級元素，而後根據業務須要進行選擇。其實只要理解底層基本的東西。還有很多的奇淫技巧能夠達到效果。
下面是這三種方法的說明：

• 第一種其實就算是以前兩種居中的組合。line-heig必須得設置一個高度
• 第二種也是前兩種的組合，只是高度寬度能夠不用設置也會居中，只是這裏不設置的話子元素默認的和父元素的寬高同樣，就看不到效果了
• 第三種照例以前的組合，沒什麼可說。

咦，兩兩組合不該該四種嗎。這裏爲什麼只有三種。是由於將parent元素設置爲table和margin的那個組合不能達到效果。由於table-cell是inline-block級別的元素，margin沒法操做種級別的。margin的喜愛是block級。

其餘類型

正如以前所說，還有不少方法能夠幹這些事。好比不少人喜歡的postion，它實際上是一個定位的神器。只是對於居中這些我用position很少。這裏就只舉一個例子吧
對於上面的html代碼
css裏面咱們能夠這樣

.parent
{
    width: 400px;
    height: 400px;
}
.child
{
    position: relative;
    top: 50%;
    left: 50%;
}

position的relative是子元素相對於父元素的位置。這裏設置的top: 50%;left: 50%;準確位置是子元素左上角和父元素的左上角。50%是相對於父元素的寬高。其實並沒徹底居中，有必定的偏差。

---

三種居中都已經介紹完了，總的來講都是水平垂直各自兩種，而後組成三種造成水平垂直居中。方法雖很少，夠用就好！！！