星空网 > 软件开发 > 网页设计

不定宽高实现垂直居中(兼容低版本ie)

css实现垂直居中的方法比较多,但是每种方法的缺陷也很明显,我尝试对其中一种方法进行了改良

先看原方法(水平竖直居中):

<div >

   <div ></div>

</div>

.parent{

  width:500px;

  height:500px;

  position:relative;

}

.child{

  width:100px;

  height:100px;

  position:absolute;

  top:50%;

  left:50%;

  margin-top:-50px;

  margin-left:-50px;

}

这种方法大家应该都了解,它有一个致命缺点:必须知道child的高度和宽度。

但是仔细想下,定位后需要调整的距离各是child宽高的一半,所以有没有办法直接通过50%来实现呢?这样就可以无视宽高

新方法登场:

<div >

   <div >

      <div ></div>

   </div>

</div>

.parent{

  width:500px;

  height:500px;

  position:relative;

}

.wrapper{

  position:absolute;

  top:50%;

  left:50%;

}

.child{

  width:100px;

  height:100px;

  margin-top:-50%;

  margin-left:-50%;

}

新方法在child外部加了一层wrapper,先对wrapper进行绝对定位,再通过child来调整距离。由于wrapper的宽高是被child撑开的,所以child设置margin-top:-50%就相当于上移了自己高度的一半

此时无需知道child的宽高便能实现垂直水平居中

 测试了下,在ie5上也可实现,兼容各版本ie

(第一次写博客,有错误之处欢迎大家指出)




原标题:不定宽高实现垂直居中(兼容低版本ie)

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

新手跨境电商怎么做:https://www.goluckyvip.com/tag/44187.html
新手区:https://www.goluckyvip.com/tag/44188.html
新手如何做外贸:https://www.goluckyvip.com/tag/44189.html
新手外贸:https://www.goluckyvip.com/tag/44190.html
新手玩tiktok:https://www.goluckyvip.com/tag/44191.html
新手怎样做外贸:https://www.goluckyvip.com/tag/44197.html
大同旅游攻略一日游 山西大同一日游旅游景点有哪些:https://www.vstour.cn/a/408251.html
如何从帽儿山到哈尔滨火车站(详细交通路线及注意事项):https://www.vstour.cn/a/408252.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流