当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/161373.html

相关文章:

  • linux的dirty page回写磁盘过程中是否允许并发写入更新page?
  • Docker-基础命令使用
  • 【Python 程序设计】Python 中的类型提示【06/8】
  • 78 # koa 中间件的实现
  • 国产操作系统麒麟v10中遇到的一些问题
  • Gridea+GitPage+Gittalk 搭建个人博客
  • 代码质量保障第2讲:单元测试 - 浅谈单元测试
  • “五度晟企通”企业发展服务平台正式发布,帮扶企业行稳致远!
  • Java类和对象(七千字详解!!!带你彻底理解类和对象)
  • 机器学习笔记:node2vec(论文笔记:node2vec: Scalable Feature Learning for Networks)
  • go基础10 -字符串的高效构造与转换
  • VR钢铁实训 | 铁前事业部虚拟仿真培训软件
  • DevOps
  • IJ中PHP环境的搭建和使用教程
  • java开发之个人微信的二次开发
  • ISYSTEM调试实践11-Profiler Timeline和软件运行时间分析
  • 第十八章 ObjectScript - 使用例程
  • Linux中select poll和epoll的区别
  • 新知同享|Cloud 开发加速创新,更加安全
  • el-form内容重置(解决点击保存关闭后再点击新增会有编辑携带的数据的问题)
  • 怎样吃透一个java项目?
  • linux 网络命令
  • QUIC协议科普导入(一)
  • matlab 矩阵逆运算的条件数
  • [构建自己的 Vue 组件库] 小尾巴 UI 组件库
  • 由于电脑出现msvcr110.dll提示错误的解决方法
  • [LINUX使用] iptables tcpdump wireshark tshark
  • 显示器鼠标滚动时或者拖拽文字变为绿色
  • 高校网络安全体系建设及零信任安全架构应用的探索
  • Android Studio设置