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

相关推荐
带娃的IT创业者几秒前
WeClaw-TTS 语音合成实战:pyttsx3 本地引擎与 Edge-TTS 云服务的混合架构.md
前端·tts·ai智能体·openclaw·weclaw
鹏程十八少3 分钟前
5.Android 如何用腾讯Shadow在双11电商场景的完整复盘(实战2年),实现热修复(全网最详细实战案例)
android·前端·面试
wl85115 分钟前
SAP HCM 公积金超过上限后的计税方案
前端·html
二月夜7 分钟前
Vue项目打包为WAR文件部署Tomcat完整指南
前端·vue.js·tomcat
终端鹿8 分钟前
Vue3 核心 API 完结篇:toRaw / markRaw / shallowReactive / shallowRef 等进阶响应式 API 详解
前端·javascript·vue.js
bigcarp9 分钟前
edge浏览器IE模式(Internet Explorer 兼容)-tplink摄像头需要
前端·edge
27669582929 分钟前
悟空租车帮app最新登录算法
开发语言·前端·python·悟空app·租车帮·租车帮app·租车帮登录逆向
摇滚侠11 分钟前
微信小程序是前端,也需要 Java 开发的后端服务
java·前端·微信小程序
lxf_gis11 分钟前
【JavaEE】Spring Web MVC
前端·spring·java-ee
sunxunyong13 分钟前
集群增加用户&权限
前端·javascript·vue.js