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
（第一次写博客，有错误之处欢迎大家指出）
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
