【CSS基础】实现 div 里的内容垂直水平居中

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

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