css div上下左右居中

通常我们用到的css布局都是左右居中，经典css写法如下：

[css] view plaincopy

1. body{  
2.     margin:0;  
3.     padding:0;  
4.     width:100%;  
5.     height:100%;  
6. }  
7. div{  
8.     margin:0 auto;  
9.     width:500px;  
10.     heigth:auto;  
11. }  

上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是

大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：

[css] view plaincopy

1. body{  
2.     margin:0;  
3.     padding:0;  
4.     width:100%;  
5.     height:100%;  
6. }  
7. div{  
8.    position:absolute;  
9.    top:50%;  
10.    left:50%;  
11.    margin-top:-250px;  
12.    margin-left:-250px;  
13.     /*此时宽和高都要固定*/  
14.     width:500px;  
15.     heigth:500px;  
16. }  

上面的margin可以合并：margin:-250px 0 0 -250px;

大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px

向左回退div宽的50%即：margin-left:-250px

好了大功告成。