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

显示如下：

相关问题

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

1、让层水平居中

CSS Code复制内容到剪贴板

1. .className{   

2.     width:270px;   

3.     height:150px;   

4.     margin:0 auto;   

5. }  

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

CSS Code复制内容到剪贴板

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()：获取第一个匹配元素外部宽度（默认包括补白和边框）。

到此，相信大家对“Div实现水平或垂直居中的方法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！