【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:;top:;right:;bottom:;
            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>