让层水平垂直居中页面的两种方法

2013-07-17阅读(5440)评论(0)牵着狗狗看MM

苏州实时公交查询

2017-05-03更新:
如果只需要支持现代浏览器或者手机端的话,推荐下面这种方式
利用CSS的变型,这种写法的好处就是,不用知道元素的宽高,向X轴跟Y轴偏移元素自身50%的宽度及高度

.className{
  position:fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

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

1、让层水平居中

.className{
    width:270px;
    height:150px;
    margin:0 auto;
}

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

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 让层水平垂直居中页面的两种方法
分享到: 更多 (0)