实现居中的方案有很多，这里介绍下纯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水平垂直居中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608220.html
微信扫一扫 
支付宝扫一扫 
