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

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;
}

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

 <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>

 <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>

    <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>