让层水平垂直居中页面的两种方法
让层水平垂直居中页面的两种方法
webxiaohua 发表于3年前
让层水平垂直居中页面的两种方法
  • 发表于 3年前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 设置DIV三种居中的方式

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

1、让层水平居中

.className{    
width:270px;    
height:150px;    
margin:0auto;
}
使用margin:0 auto;让层水平居中,留意宽度和高度必不可少。

2、让层垂直居中

.className{    
width:270px;    
height:150px;    
position:absolute;    
left:50%;    
top:50%;    
margin:-75px 0 0 -135px;
}
将层设置为绝对定位,left和top为50%,这时候使用负外边距,负外边距的大小为宽高的一半。

3、在重置窗体的时候层依旧保持居中

$(document).ready(function(){                          
$(window).resize(function(){   
$('.className').css({   
position:'absolute',   
left:($(window).width()- $('.className').outerWidth())/2,
top:($(window).height()- $('.className').outerHeight())/2
});
});  
$(window).resize();});
这里用到的jquery的方法。
resize()事件:当在窗体重置大小时触发。
outerWidth():获取第一个匹配元素外部宽度(默认包括补白和边框)。

标签: DIV居中
共有 人打赏支持
粉丝 10
博文 39
码字总数 25544
×
webxiaohua
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: