這些天忙完了一些項目后，終于有時間來總結一下了。自己就把做項目過程中的體會和理解到的一些東西和大家分享一下。有錯請指正！！
在css中，元素居中顯示，是基礎也是一個小難點。我們經(jīng)常不知為何總是不能把元素放在我們想放的地方?，F(xiàn)在咱們就來總結一下一些常見的居中。至少能讓我們解決平時開發(fā)的問題。
居中分為三種：
- 水平居中
- 垂直居中
- 水平垂直同時居中
我們一個一個來看，一個一個理解，解決。
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。那他們的區(qū)別或者說優(yōu)劣如何呢？
我的理解是：
- 第一種會讓該元素內部的子元素都居中顯示，有時這并不是我們想要的結果。
- 第二種是必須要設置寬度，有的同學沒有設置寬度會發(fā)現(xiàn)margin 0 auto 不起作用。其實并非這樣。只是他的默認寬度往往是繼承父元素的寬度。所以看不到效果。
2.垂直居中
html代碼
<div class="parent">
<div class="child">
<p>測試文本 </p>
</div>
</div>
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可以產(chǎn)生效果，如果有不了解這三種類型的，可以去看一下這三者的區(qū)別和聯(lián)系，再了解一下塊級和行級元素。這里就不細說了。
ps：vertical-align還有很多用法，這里不再細講，比較多。但是要注意的是，很多用法會出現(xiàn)瀏覽器不兼容的問題bug較多。所以注意多瀏覽器測試。筆者上面的方法經(jīng)過測試。是兼容的。
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;
}
三種各有優(yōu)劣勢。需要大家理解塊級元素，行級元素，然后根據(jù)業(yè)務需要進行選擇。其實只要理解底層基本的東西。還有不少的奇淫技巧可以達到效果。
下面是這三種方法的說明：
- 第一種其實就算是之前兩種居中的組合。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%是相對于父元素的寬高。其實并沒完全居中，有一定的誤差。
