CSS3实现DIV垂直居中+⽔平居中的四种⽅法<div class="div1">
<div class="div2"></div>
</div>
html结构如上
⽅法1：display：table-cell  +  textalign:center
注：display:table-ceil会使元素变为内联元素div中的div居中
.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结构和元素。总之，没有最好的，只有最合适的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。