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

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：方法一：使用插入 [table](http://www.imooc.com/code/292 "忘了的小伙伴，讓我們點擊鏈接復習一下吧! ") (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。 css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對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} ~~~ 因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。 ***** ### 相關解答網址：https://www.imooc.com/qadetail/289428 ***** ### 任務我來試試：把右側的小女生圖片設置為相對于瀏覽器窗口垂直居中。（記得點擊右上角的全屏按鈕查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>父元素高度確定的多行文本</title> <style> .wrap{height:300px;background:#ccc} .girl{height:300px;background:#ccc} </style> </head> <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table>  <table><tbody><tr><td class="girl"> <div> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> </div></td></tr></tbody></table> </body> </html> ```