为什么flex中的margin auto使垂直和水平居中[重复]

Question

这是一个 CSS 问题，如果我们将 margin: auto 置于正常流中，则只有左右边距空间被平均。但是，如果我们将 'margin: auto` 放在一个 flex 项目上，该项目在水平和垂直方向上都居中，这是为什么呢？

代码如下：

#one {
    width:300px;
    height:300px;
    border:solid 2px black;
    margin:auto;
    display:flex;
}

#two {
    width:100px;
    height:100px;
    background:red;
    margin:auto;
}

<div id = "one">
 <div id ="two"></div> 
</div>

期待任何意见！

Answer 1

flex 的功能是根据父 div 的高度和宽度计算各个方向的边距，

即

1. 高度和宽度为 300px 的 div#one

2. 高度和宽度为 100px 的 div#two

所以边距计算为margin:100px;

这意味着

#two{
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
}

如果您只需要水平边距，请使用margin:0 auto;