css实现垂直居中的方法比较多,但是每种方法的缺陷也很明显,我尝试对其中一种方法进行了改良先看原方法(水平竖直居中):<div > <div ></div></div>.parent{ width:500px; height ...
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。