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

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

编辑于：2017.09.13 00:19 发布于：2017.09.12 14:58

html5 布局 css flex

| 评论0 | 收藏 | 浏览771 |

: _青春离奇

声望： 0

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>

显示效果