为什么柔性边缘自动使垂直和水平居中

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. div＃one的高度和宽度为300px

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

因此边距计算为margin:100px;

这意味着

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

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