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

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

创建一个新的htML页面，

1. !DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
2. html xmlns="http://www.w3.org/1999/xhtml">   
3. head>   
4. meta http-equiv="Content-Type" content="text/html;  charset=gb2312" />   
5. title> 无标题文档/title>   
6. /head>   
7. body>   
8. /body>   
9. /html>   

在head> /head> 中间，插入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. div id="warp">   
2. 　　span> 共计/span>   
3. 　　　　span> 71/span>   
4. 　　span> 条数据符合条件/span>   
5. /div>   

显示如下：

相关问题

这里让一个层居中是一个非常常见的布局方式，但在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()：获取第一个匹配元素外部宽度（默认包括补白和边框）。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！