中心Flex盒

Question

我有多个弹性框的代码。当页面展开时，我如何将它们垂直居中在页面中？我尝试在justify-content: center;中使用flex-container，但是当我使用flex: 1 0 auto;来使框响应时，它确实有效。什么都有帮助，谢谢。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>