15-8垂直居中-父元素高度確定的多行文本（方法二） · 初識HTML+CSS

除了上一節講到的插入table標簽，可以使父元素高度確定的多行文本垂直居中之外，本節介紹另外一種實現這種效果的方法。但這種方法兼容性比較差，只是提供大家學習參考。在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式, 兼容性比較差。 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> ~~~ 這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。 ### 任務我來試試：如果你使用的是 chrome、firefox 及 IE8 以上的瀏覽器，你可以使用本小節的方法把右小女生的圖片設置為垂直居中。（記得點擊右上角的全屏按鈕查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>父元素高度確定的多行文本</title> <style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style> </head> <body> <div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>  <div> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> </div> </body> </html> ```