方案一: 所有内容垂直水平居中
兼容性: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>