让Div实现水平或垂直居中的相关方法

先来看一个最普通的实现示例：

创建一个新的html页面，

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   

在中间，插入CSS代码

1. #warp {    
2. position: absolute;    
3. width:500px;    
4. height:200px;    
5. left:50%;    
6. top:370px;    
7. margin-left:-250px;    
8. margin-top:-100px;    
9. }  

在HTML代码里调用这个CSS

1. "warp">   
2. 　　共计   
3. 　　　　71   
4. 　　条数据符合条件   
5.   

显示如下：

相关问题

这里让一个层居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。

1、让层水平居中

1. .className{   
2.     width:270px;   
3.     height:150px;   
4.     margin:0 auto;   
5. }  

使用margin:0 auto;让层水平居中，留意宽度和高度必不可少。
2、让层垂直居中

1. .className{   
2.     width:270px;   
3.     height:150px;   
4.     position:absolute;   
5.     left:50%;   
6.     top:50%;   
7.     margin:-75px 0 0 -135px;   
8. }  

将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。
3、在重置窗体的时候层依旧保持居中

Javascript Code复制内容到剪贴板

1. $(document).ready(function(){      
2.                                 
3. $(window).resize(function(){      
4.        
5.   $('.className').css({      
6.    position:'absolute',      
7.    left: ($(window).width()       
8.      - $('.className').outerWidth())/2,      
9.    top: ($(window).height()      
10.      - $('.className').outerHeight())/2      
11.   });      
12.              
13.  });     
14.     
15.     
16. $(window).resize();   
17.     
18. });  

这里用到的jquery的方法。
resize()事件：当在窗体重置大小时触发。
outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。