【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会找到父元素的位置开始自动计算,并分配好上下左右外边距,从而实现水平垂直居中!

相关推荐
gnip40 分钟前
axios 拦截器实现用户无感刷新 access_token
前端
程序员码歌1 小时前
【零代码AI编程实战】AI灯塔导航-成果展示篇
前端·ai编程·cursor
gnip1 小时前
前端实现即时通讯,常用的技术
前端
烛阴1 小时前
告别 any!用联合类型打造更灵活、更安全的 TS 代码
前端·typescript
excel2 小时前
全面解析 JavaScript 类继承:方式、优缺点与应用场景
前端
用户21411832636022 小时前
dify案例分享-100% 识别率!发票、汇票、信用证全搞定的通用票据识别工作流
前端
拾光拾趣录4 小时前
基础 | HTML语义、CSS3新特性、浏览器存储、this、防抖节流、重绘回流、date排序、calc
前端·面试
小小小小宇4 小时前
前端监测用户卡顿之INP
前端
小小小小宇4 小时前
监测用户在浏览界面过程中的卡顿
前端
糖墨夕4 小时前
Nest 是隐藏的“设计模式大佬”
前端