【css】margin:auot什么情况下失效

margin:auto只对块级元素有效果,并且在正常文档流margin:auto===margin:0 auto,css默认在正常文档流里面margin-top和margin-bottom是0

为什么margin: auto能实现水平居中,而垂直居中不行?

一般子元素是否在父元素里面居中都是需要计算的,如果父元素的宽度是200px,子元素的宽度是100px,公式:父元素的宽度=子元素的宽度+padding+margin+border(w3c标准盒子模型) ,这里子元素没有padding,border,那么子的外边距margin应该是(200-100)/2=50px ,如果子元素直接设置margin:auto,那么这个auto就是50px,所以这种居中是靠外边距margin-left 和margin-right来实现居中的,为什么垂直居中应该w3c默认规定margin-top和margin-right为0,所以实现不了垂直居中

为什么margin: auto通过绝对定位可以实现水平垂直居中

上面说了在正常的文档流当中w3c默认规定margin-top和margin-right为0,所以实现不了垂直居中,只有绝对定位的元素才可以,意思就是绝对定位之后如果设置了margin:auto,那么margin-top和margin-right不再为0,而是auto,同时需要设置top,bottom,left,right为0来找到父元素的位置,然后margin:auto会找到父元素的位置开始自动计算,并分配好上下左右外边距,从而实现水平垂直居中!

相关推荐
摆烂工程师3 分钟前
什么是MCP?一分钟搞懂!
前端·后端·程序员
A死灵圣法师12 分钟前
同一个接口,掉n次,取消上次请求
前端
前端涂涂16 分钟前
JavaScript面试宝典
前端·javascript
卖报的小行家_21 分钟前
读《Vue.js设计与实现》第四章·响应系统的作用与实现
前端
七月丶23 分钟前
🚀 前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?
前端
沉默王二24 分钟前
更快更强!字节满血版DeepSeek在IDEA中真的爽!
java·前端·程序员
码农研究僧28 分钟前
Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!
uni-app·vue·html·onshow
掘金酱30 分钟前
👏 用idea传递无限可能!AI FOR CODE挑战赛「创意赛道」作品提交指南
前端·人工智能·trae
Hamm32 分钟前
咦,你的Git仓库贡献者里怎么有这么多大佬???
前端·git·github
陈卓4101 小时前
Redis-限流方案
前端·redis·bootstrap