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

相关推荐
前端开发爱好者1 分钟前
Vue 团队成员又搞了个 "新玩具"!
前端·javascript·vue.js
用户01360875668840 分钟前
前端实现文件上传功能
前端
秦牛正威42 分钟前
CSS的 white-space、word-break、overflow-wrap的用法
css
咖啡の猫1 小时前
Vue-github 用户搜索案例
前端·vue.js·github
yong99901 小时前
响应式布局新利器:CSS Grid 的 grid-template-areas 实战
前端·css
咖啡の猫1 小时前
Vue过度与动画
前端·javascript·vue.js
IT_陈寒1 小时前
Python数据处理速度慢?5行代码让你的Pandas提速300% 🚀
前端·人工智能·后端
蒜香拿铁1 小时前
Angular【起步】
前端·javascript·angular.js
护国神蛙1 小时前
HTTP 重定向踩坑实录:307、301、308 问题排查全指南
前端·网络协议
初心丨哈士奇1 小时前
前端Vibe Coding探索:Cursor+MCP打造沉浸式开发流(使用MCP与Cursor Rules让Vibe Coding更快速与精准)
前端·人工智能