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>
先看下效果：
![[2024年]瞬间的收藏家优秀作文1200字](https://1200zi.500zi.com/uploadfile/img/2024/06/13/abe79d8b429dd5f8d494a80b6a0a3bef.jpg)
