?方案一： 所有內容垂直水平居中

　　兼容性：IE8+。

? ? ?條件：內容寬度和高度可以未知，可以是多行文字、圖片、div。

　　描述：使用table-cell + vertical-align ，?html代碼見文末。

.centerDiv {width: 800px;height: 350px;background-color: #00b0f0;text-align: center;display: table-cell;vertical-align: middle;}

?

方案二： 單行內容垂直水平居中

　　兼容性：IE7+

　　條件： 文字內容必須為單行

? ? ? 描述： text-align: center水平居中， line-height 等于height 垂直居中

?

方案三： 未知大小圖片垂直水平居中

　　兼容性：IE8+

　　條件：內容為圖片，文字不行。文字和圖片組合時，圖片能居中，文字不能。

　　描述：父節點相對定位，圖片絕對定位

.centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv img {position: absolute;left: 0;top:0;right: 0;bottom: 0;margin: auto;}

?

方案四：已知寬高度div垂直水平居中

　　兼容性：I5+

　　條件：內容div高度寬度已知

　　描述： 定位 + 負margin

.centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv div {width: 500px;height: 300px;background-color: #00ee00;position: absolute;left: 50%; top: 50%;margin-left: -250px;margin-top: -150px;}

?

?

附： html測試代碼

<div class="centerDiv"><p>hello， this a p tag.</p></div><br><div class="centerDiv"><img src="img/head.jpg"></div><br><div class="centerDiv"><div><p>qwe</p><p>qwe</p><p>qwe</p></div></div>

?

轉載于:https://www.cnblogs.com/codelovers/p/4399664.html

總結

以上是生活随笔為你收集整理的【CSS基础】实现 div 里的内容垂直水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。