前言

我们经常遇到需要把div中的内容进行水平和垂直居中。这里介绍一些让DIV水平居垂直中的方法.

一.使用margin:auto使DIV水平居中

1
2
3
4
5
6
margin:auto;
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;

二.使用绝对定位的DIV水平垂直居中

1
2
3
4
5
6
7
width:200px;
height:100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-100px;

三.使用display:box实现水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

四.总结

上面三种方法我都有测试验证,具体选择哪一种全凭个人喜好.