我想有一个非常简单的布局,但我无法让它工作
<div class="page-wrapper">
<div class="top-half">
<div class="center-me-vertically-and-horizontally"></div>
</div>
<div class="bottom-half">
<div class="center-me-vertically-and-horizontally"></div>
</div>
</div>
page-wrapper 和 top-half/bottom-half 使用 flexbox(列)很容易实现,但是如何让叶节点在半容器内垂直和水平居中?
最佳答案
你可以给 flex boxes 加上标签:
html, body, .page-wrapper {
height:100%;
margin:0;
}
.page-wrapper {
display:flex;
flex-direction:column;
}
.top-half , .bottom-half {
display:flex;
flex:1;
align-items:center;
justify-content:center;
box-shadow: 0 0 0 1px ; /* lets see them */
}
<div class="page-wrapper">
<div class="top-half">
<div class="center-me-vertically-and-horizontally">top</div>
</div>
<div class="bottom-half">
<div class="center-me-vertically-and-horizontally">bottom</div>
</div>
</div>
关于css - 布局 flexbox : how to get the leaf nodes centered vertically and horizontally within the half-containers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33766433/