題外話：前兩天和專(zhuān)業(yè)老師探討最近的一個(gè)項(xiàng)目，涉及到對(duì)一個(gè)浮動(dòng)的盒子局中的問(wèn)題，老師的解決方法打開(kāi)了我的新思路。讓我有了總結(jié)一下平時(shí)的居中問(wèn)題的想法。不然可能忘掉了以后又要到處尋找解決辦法了。另外也給我一個(gè)啟示：?jiǎn)⑹窘鉀Q方法有很多，就看你能不能對(duì)知識(shí)靈活運(yùn)用。也是通過(guò)這件事我體會(huì)到了“靈活運(yùn)用”的真正含義。做事情是這樣，做技術(shù)尤其要這樣。

　　這個(gè)總結(jié)要一直在整理完善中，以后有了什么新的想法、新的解決辦法都要再修改?？上Р辉趃ithub中，不然可以集思廣益了。

　　———————————————--------------—開(kāi)始-分割線—-----------------———————————————

一、垂直居中

　?。ㄏ到y(tǒng)筆記之） 父元素高度確定的【單行】文本

父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的；

line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。

line-height 與 font-size 的計(jì)算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

這種文字行高與塊高一致帶來(lái)了一個(gè)弊端：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)，就有內(nèi)容脫離了塊。

最后效果見(jiàn)下邊的第一條　1.行高+高度：line-height：Npx（N = 與元素高度相同的值）；

　?。ㄏ到y(tǒng)筆記之） 父元素高度確定的【多行】文本

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

方法一：使用插入 table （包括tbody、tr、td）標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。

css 中有一個(gè)用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類(lèi)型的子元素都有用。下面看一下例子：

html代碼：

1 
2 <td class="wrap">
3 
4     
看我是否可以居中。p>
5 div>
6 </td>tr></tbody>table>
7 body>
css代碼：
1 table td{height:500px;background:#ccc} 
因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。
方法二：設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示）
但這種方法兼容性比較差，只是提供大家學(xué)習(xí)參考。
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性，
但注意 IE6、7 并不支持這個(gè)樣式, 兼容性比較差。
html
1 <div class="container">
2     
3         
看我是否可以居中。p>
4         
看我是否可以居中。p>
5         
看我是否可以居中。p>
6     div>
7 div>
css
1