html - 最大高度后页面中心的 flexbox

Question

我为响应式页面的 flexbox 设置了最大宽度和高度。在它超过最大高度和宽度后，即使我的 .flex-container 上有 justify-content: center; 框也不再位于页面中心.我在这里做错了什么？有什么帮助，谢谢! CodePen

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

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

.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

您需要将容器居中。

将此添加到您的代码中:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100vh;
    margin: 0;
}

revised codepen

请注意，默认情况下， block 元素占用其父元素的整个宽度。但是，此行为不会扩展到高度 ( more details)。