<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如下：
1 .div1{ 2 width: 200px; 3 height: 150px; 4 background: dodgerblue; 5 position: relative; 6 } 7 .div2{ 8 width: 60px; 9 height: 30px; 10 background: yellow; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 margin-left: -30px; 15 margin-top:-15px; 16 }
方法4：内部div放入表格中，dom结构如下：
1 <div class="div1"> 2 <table class="t1"> 3 <tr> 4 <td></td> 5 <td></td> 6 <td></td> 7 </tr> 8 <tr> 9 <td></td> 10 <td><div class="div2"></div></td> 11 <td></td> 12 </tr> 13 <tr> 14 <td></td> 15 <td></td> 16 <td></td> 17 </tr> 18 </table> 19 </div>
只需使外层div与table的长宽一致便可，css如下：
1 .div1{ 2 width: 200px; 3 height: 150px; 4 background: dodgerblue; 5 text-align: center; 6 vertical-align: middle; 7 } 8 .div2{ 9 width: 60px; 10 height: 30px; 11 background: yellow; 12 display: inline-block; 13 } 14 .t1{ 15 width: 200px; 16 height: 150px; 17 }
*直观感受方法4略显臃肿，但究竟使用哪种方法就需要视情况分析。比如说需要使用表格，并且在表现层中央需要一个块级元素，那么方法4就显得两全其美了。其余三种方法就需要分析div内部和外部的DOM结构和元素。总之，没有最好的，只有最合适的。