CSS布局问题，为何不能完全居中，求大神解答

Question

HTML:

CSS：
.item{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
margin:4px;

background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;

}
.box{
margin: 16px;
padding: 4px;

background-color: #e7e7e7;
width: 150px;
height:150px;

display: flex;
flex-direction: row;

}
html, body{
height: 100%;
}
body{
display: flex;
align-items: center;
justify-content: center;
vertical-align: center;
flex-wrap: wrap;
align-content: center;
background-color: blue;
}
.item:nth-child(2){
align-self: center;
}

Answer 1

css里面横向居中 text-align: center; 如果在一个

里面设置 text-align: center; 那么它里面的子控件会居中排列，如果是在一个控件比如
上设置居中，那么button上的内容会水平居中。
css里面的垂直居中vertical-align: cm; 这个属性并不想我们预期的那样让控件垂直居中排列或者控件内容垂直居中显示。例如下面的例子

 <div style="width: 100%;height: 10%;background-color: #0f0;vertical-align: cm;">
        <button style="width: 10%;height: 90%;">你好</button>
        <label style="font-size: 0.6rem;">will</label>
    </div>

显示效果

vertical-align: cm;属性设置与否显示效果都是一样的，但如果加上另一个属性float: left; 显示如下：

 <div style="width: 100%;height: 10%;background-color: #0f0;">
        <button style="width: 10%;height: 90%;float: left;">你好</button>
        <label style="font-size: 0.6rem;float: left;">will</label>
    </div>

如果

设置了cm，但控件里面设置了float:left;如下

    <div style="width: 100%;height: 10%;background-color: #0f0;vertical-align: cm;">
        <button style="width: 10%;height: 90%;float: left;">你好</button>
        <label style="font-size: 0.6rem;float: left;">will</label>
    </div>

显示效果

分析：根据以上三种情况可见，垂直居中这个属性必须在某些特殊情况下才有效，默认情况下

中的控件是水平排列，且后面的控件以前面的控件
作为参考垂直排列，这意味着默认情况下

设置了垂直排列的属性。但，如果改变了子控件的排列方式，如float属性，那么默认的垂直属性便会
失效。另外，对于垂直属性我也是很纠结，希望能有更全面的使用说明。