父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的火鼻。(height: 該元素的高度艺栈，line-height: 顧名思義失驶，行高（行間距），指在文本中洲愤，行與行之間的 基線間的距離 )。
<div class="container">
hi,imooc!
</div>
css代碼：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
父元素高度確定的多行文本
方法一：使用插入 table (包括tbody、tr奕塑、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle家肯。
css 中有一個(gè)用于豎直居中的屬性 vertical-align龄砰，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用讨衣。下面看一下例子：
html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中换棚。</p>
</div>
</td></tr></tbody></table> </body>
css代碼：
table td{
height:500px;
background:#ccc
}
因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了反镇。
方法二：在 chrome固蚤、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性歹茶，但注意IE6夕玩、7 并不支持這個(gè)樣式, 兼容性比較差。
html代碼：
<div class="container">
<div>
<p>看我是否可以居中辆亏。</p>
<p>看我是否可以居中风秤。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代碼：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome扮叨、Firefox*/
vertical-align:middle;/*IE8以上及Chrome缤弦、Firefox*/
}
</style>
這種方法的好處是不用添加多余的無(wú)意義的標(biāo)簽，但缺點(diǎn)也很明顯彻磁，它的兼容性不是很好碍沐，不兼容 IE6狸捅、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)累提。
還有一種方法：
.container{
position: absolute;
top:50%;
left:50%;
margin:-170px -250px; /*container寬500px尘喝，高340px*/
}
