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

本文介绍了如何通过在CSS中添加一个wrapper层,利用百分比margin实现子元素的垂直居中,而无需预先知道子元素的高度。这种方法在IE5及以上浏览器中均可兼容,简化了传统方法的局限性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

5268f80b9b1e01f982625ef6fac83ca1.png

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

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

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值