不定高度实现垂直居中(兼容低版本ie)_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:21:34
原創
1276 人瀏覽過

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

先看原方法:

   

.parent{

  width:500px;

  height:500px;

  position:relative;

}

.child{

  width:100px;

  height:100px;

  position:absolute;

  top:50%;

  margin-top:-50px;

}

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

但是仔细想下,定位后需要调整的距离正好是child高度的一半,所以有没有办法用50%来代替距离呢?这样就可以无视高度

新方法登场:

   

      

   

.parent{

  width:500px;

  height:500px;

  position:relative;

}

.wrapper{

  position:absolute;

  top:50%;

}

.child{

  width:100px;

  height:100px;

  margin-top:-50%;

}

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

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板