实现居中的方案有很多，这里介绍下纯css使用absolute配合margin的方案。
1. p宽高固定
width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px;
margin-top为-(height / 2)，margin-left为-(width / 2)。当然也可以不用margin，即top为calc(100% - height) / 2，left为calc(100% - width) / 2，但是建议可以不用calc()就不要用。
2. p宽高不固定
width: 50%; height: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
注意，这适用于宽高需指定的情况，比如使用百分比或者用js动态修改，不然可能被当成100%处理。
立即学习“前端免费学习笔记（深入）”；
也可以不用margin用translate()，如下：
width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
3. CSS3不定宽高水平垂直居中
justify-content: center; /* 子元素水平居中 */ align-items: center; /* 子元素垂直居中 */ display: -webkit-flex;
在父级元素上添加，即可实现子元素水平垂直居中。
以上就是利用CSS实现div水平垂直居中的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![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号
999
