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

兼容性：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>

如果觉得《【CSS基础】实现 div 里的内容垂直水平居中》对你有帮助，请点赞、收藏，并留下你的观点哦！