margin:auto水平居中和垂直居中的原理分析

2024-07-04 05:18:23

margin属性平时写css几乎天天写，再熟悉不过了！今天我们来深入讨论下margin的一些居中的问题（本来这篇文章早就想写的，一直忘记了），话不多说，直接进入正题！

1.margin:auto

有人可能要问了，margin:auto 这个有啥好讨论的？先看下小测试的代码！

<style>.auto{width: 200px;height: 200px;background-color: aqua;margin: auto;}
</style>
<body><div class="auto"></div>
</body>

先看下效果：

再看下调试工具的样式：

可以很清楚的发现：margin-left是0 ,margin-right也是0 ，那么 margin: auto === margin: 0 auto;

2.为什么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，所以实现不了垂直居中

3.为什么margin: auto通过绝对定位可以实现水平垂直居中

上面说了再正常的文档流当中w3c默认规定margin-top和margin-right为0，所以实现不了垂直居中，只有绝对定位的元素才可以，意思就是绝对定位之后如果设置了margin：auto,那么margin-top和margin-right不再为0,而是auto，同时需要设置top,bottom,left,right为0来找到父元素的位置，然后margin：auto会找到父元素的位置分配好上下左右外边距，从而实现水平垂直居中！

<style>body{background-color: #aaa;}.auto {width: 200px;height: 200px;background-color: aqua;position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;}
</style><body><div class="auto"></div>
</body>

先看下效果：

margin:auto水平居中和垂直居中的原理分析相关推荐

margin 实现水平居中，垂直居中原理
首先了解下,margin的auto属性的作用是用来分配剩余空间,所以对于有剩余空间的元素才有效哦(块及元素).比如图片设置margin: 0 auto是无效的,因为图片是内联元素,不是占一整行,没有剩 ...
你不知道的margin:auto居中原理
目录 auto值对布局的影响当margin-left.margin-right.width其中margin-left.margin-right为特定值,width为auto 当width 为特定值, ...
margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...
CSS水平居中，垂直居中，水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
css居中大全（文字居中、块居中、水平居中、垂直居中）
css居中一.水平居中 1.块本身水平居中 div{width: 100px;height: 100px;border: 1px solid #000;margin:auto;} <div&g ...
css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
【html5/css3】水平居中，垂直居中以及水平垂直居中方法
水平居中默认html: <div class="parent"><div class="child">child</div> ...
水平居中和垂直居中方法
参考并稍作修改: https://juejin.cn/post/6844903799446831117#heading-5 https://juejin.cn/post/684490347487900 ...
表格行与列边框样式处理的原理分析及实战应用
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:韩宇波导语:table之间的边框存在共用问题,自然而然就存在冲突.既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题.本文就主要研 ...

最新文章

热门文章