切 你以為總結(jié)完水平蝌焚，就不能干一下垂直了嗎裹唆！
-
父元素高度確定的單行文本
通過設(shè)置父元素的 height 和 line-height 高度一致來實(shí)現(xiàn)的。如下代碼：
html:
<div class="container"> hi,imooc!</div>
css代碼：
<style>.container{ height:100px; line-height:100px; background:#999;}</style>
-
父元素高度確定的多行文本只洒、圖片许帐、塊狀元素
方法一：使用插入 table (包括tbody、tr毕谴、td)標(biāo)簽成畦，同時設(shè)置 'vertical-align：middle'。
說到豎直居中涝开，css 中有一個用于豎直居中的屬性 'vertical-align'循帐，但這個樣式只有在父元素為 td 或 th 時，才會生效舀武。所以又要插入 table 標(biāo)簽了拄养。下面看一下例子：
html代碼：
<body><table><tbody><tr><td class="wrap"><div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中银舱。</p>
<p>看我是否可以居中瘪匿。</p>
<p>看我是否可以居中。</p>
<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è)置塊級元素的 display 為 table-cell嘁锯，激活 vertical-align 屬性，但注意 IE6聂薪、7 并不支持這個樣式家乘。
html代碼：
<div class="container"><div>
<p>看我是否可以居中。</p>
</div></div>
css代碼：
<style>
.container{ height:300px; background:#ccc; display:table-cell;
/IE8以上及Chrome藏澳、Firefox/ vertical-align:middle;/IE8以上及Chrome仁锯、Firefox/}</style>
這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點(diǎn)也很明顯翔悠，它的兼容性不是很好业崖，不兼容 IE6野芒、7。
