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结构和元素。总之，没有最好的，只有最合适的。