css 利用 position + margin 实现固定盒子横向纵向居中的方法

2020-12-23 0 799

margin:auto; + position: absolute; 上下左右:0
一看 demo 就懂的啦

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>利用 position + margin 实现固定盒子横向纵向居中</title><style>body * {outline: 1px #ff0000 solid;}.father {width: 500px;height: 300px;position: relative;}.father .son {width: 180px;height: 140px;/*  */position: absolute;right: 0;bottom: 0;top: 0;left: 0;margin: auto;}</style></head><body><div class="father"><div class="son">margin:auto + 上下左右:0</div></div></body></html>

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>利用 position + margin 实现固定盒子横向纵向居中</title><style>body * {outline: 1px #ff0000 solid;}.father {width: 500px;height: 300px;position: relative;}.father .son {width: 180px;height: 140px;/* */position: absolute;right: 0;bottom: 0;top: 0;left: 0;margin: auto;}</style></head><body><div class="father"><div class="son">margin:auto + 上下左右:0</div></div></body></html>

//end

到此这篇关于css 利用 position + margin 实现固定盒子横向纵向居中的方法的文章就介绍到这了,更多相关css固定盒子横向纵向居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

本知识来源于互联网索引，如有侵权请联系我们！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在！

1、寻代码所有源码、代码、教程和软件均为作者提供和网友推荐收集整理而来！
2、寻代码提供的所有模块、软件等资源，均不提供任何技术服务，请知悉！
3、如您需要商用，请支持正版，寻代码网站所提供的程序仅供学习和研究使用！
4、寻代码源码不得使用于非法商业用途，不得违反国家法律。您必须在下载后24小时内删除！
5、寻代码资源每天实时更新，如遇压缩包解压密码，一律为：www.xundm.com
6、寻代码资源售价和VIP会员只是赞助，收取费用仅维持本站的日常运营所需！
7、如有链接无法下载、失效或广告，请在会员中心下工单！
如有侵犯您版权的，请来信（邮箱:[email protected]）指出，本站将立即改正。

寻代码 CSS css 利用 position + margin 实现固定盒子横向纵向居中的方法 https://xundm.com/202014055.html