CSS3实现DIV垂直居中+水平居中的四种方法

<div class="div1">
    <div class="div2"></div>
</div>

html结构如上

方法1：display：table-cell  +  textalign:center   

注：display:table-ceil会使元素变为内联元素

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            display: inline-block;
        }

方法2：display:table-ceil  +  margin: 0 auto

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            display: table-cell;
            vertical-align: middle;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            margin: 0 auto;
        }

方法3：定位+负的margin，css如下：

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            position: relative;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top:-15px;
        }

方法4：内部div放入表格中，dom结构如下：

<div class="div1">
    <table class="t1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><div class="div2"></div></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

只需使外层div与table的长宽一致便可，css如下：

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            text-align: center;
            vertical-align: middle;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            display: inline-block;
        }
        .t1{
            width: 200px;
            height: 150px;
        }

*直观感受方法4略显臃肿，但究竟使用哪种方法就需要视情况分析。比如说需要使用表格，并且在表现层中央需要一个块级元素，那么方法4就显得两全其美了。其余三种方法就需要分析div内部和外部的DOM结构和元素。总之，没有最好的，只有最合适的。