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

相关推荐
excel13 小时前
Marked 与 Markdown 有什么区别?该怎么选?
前端
Da Da 泓14 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
zxcvb15314 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档
niucloud-admin15 小时前
NIUCLOUD PHP SAAS上门家政使用文档:城市管理
java·前端·php
北岛贰15 小时前
啵啵音乐迎来全新升级!
前端
hkNaruto17 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒17 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro17 小时前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰17 小时前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师17 小时前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端