auto的计算过程

拼搏现实的明天。 2022-05-25 23:15 170阅读 0赞

想必大家都遇到过这样一个问题，就是想要让一个元素在另外一个元素中实现水平垂直居中（方法有很多，我之前总结了很多种，有兴趣的请点击[https://blog.csdn.net/lhjuejiang/article/details/79756844][https_blog.csdn.net_lhjuejiang_article_details_79756844]）。水平方向上我们可以让margin的值为auto实现水平居中，但是垂直方向上却不能设置margin的值为auto让其在垂直方向上居中，你有没有问过为什么呢？想知道为什么吗？叮叮叮，请看下面，揭秘时间

想要知道为什么，首先我们要了解auto的计算过程啦

对于块状元素，它要独占一行（在不给width情况下，它充满一整行）。如果你给它设置了width值，但在水平方向上，还有剩余空间（它的宽度比外部的容器的宽度小），当我们把一个属性的值设为auto的时候，这个空间就会被用来计算

1、一侧auto，另一侧固定，auto就是整个多余的空间

2、两侧都是auto，会平均分配多余的空间

所以，揭秘，block盒子为什么不能垂直方向利用auto实现居中？

对于元素来讲，如果不设置高度，在垂直方向上，它不会去铺满整个列，所以在垂直方向上，它没有多余的空间。

但是，如果是给元素设置了display:flex,可以利用margin:auto实现完美的居中。原因很简单，因为当我们给父级元素display设置为flex时，其中容器有个属性align-items（定义项目在交叉轴上如何对齐），在默认情况下属性值为stretch，而这个值的特点就是，如果项目未设置高度或高度设为auto，将占满整个容器的高度，所以当我们为项目设置了高度的时候，此时，它在垂直方向上是由多余空间的，那么此时我们设置垂直方向的margin值为auto，就可以让其在垂直方向上 居中啦。

嗯，直接看例子

HTML代码

css代码

.container{
                width:300px; height:300px;
                background:#eee;
                display:flex;
            }
            .item{
                width:50px; height:50px;
                margin:auto;
                background:#f10215;
            }

关键代码：display:flex;  margin:auto;

效果图

![20180420180205344][]

完毕

[https_blog.csdn.net_lhjuejiang_article_details_79756844]: https://blog.csdn.net/lhjuejiang/article/details/79756844
[20180420180205344]: /images/20220526/6206e5942c9f4c8e8c0a17c987558ee8.png