html - 居中 Flex 盒子

Question

我在下面有多个 flexbox 的代码。当页面展开时，我如何将它们垂直居中放置在页面中？我尝试在我的 flex-container 中使用 justify-content: center; 但当我使用 flex: 1 0 auto; 时它确实有效使盒子响应。任何帮助，谢谢。

.flex-container {
    display:flex;}

.flex-post { 
    background-color: #f1f1f1;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    flex: 1 0 auto;
    height:auto;
    max-height:270px;
    max-width:270px;
    align-items: center;
    justify-content: center;
    display:flex;}

.flex-post:before {
    content:'';
    float:left;
    padding-top:100%;}

.flex-post:hover { 
    background-color: rgba(1,1,1,0.5);}

<div>
</div>

<div class="flex-container">
    <div class="flex-post">1</div>
    <div class="flex-post">2</div>
    <div class="flex-post">3</div>
</div>
<div class="flex-container">
    <div class="flex-post">4</div>
    <div class="flex-post">5</div>
    <div class="flex-post">6</div>
</div>
<div class="flex-container">
    <div class="flex-post">7</div>
    <div class="flex-post">8</div>
    <div class="flex-post">9</div>
</div>

Answer 1

试试这个:

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-center {
    justify-content: center;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

现在有了这些类，你可以做这样的事情:

水平居中:

<div class="flex flex-row flex-center">foo</div>

垂直居中:

<div class="flex flex-column flex-center full-height">foo</div>