html - CSS - 无论 flexbox 属性如何，文本在顶部对齐

Question

我想知道为什么无论 flexbox 值如何，文本“Check out my work”都对齐在 flexbox 的顶部而不是中心。这是代码笔:https://codepen.io/don0ts/pen/JByjqO

代码: flex 盒容器:

#work {
 color:white;
 width:100%;
 height:800px;
 background-color:rgb(235, 73, 67);
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-content:center;
 border-bottom:3px solid rgba(48,48,57,0.1);
}

flexbox 容器内的网格容器:

.grid-container{
 margin:auto;
 display:grid;
 grid-template- columns:repeat(5,1fr);
 grid-gap:10px;
}

HTML

<section id="work">
 <header><h1>Check out my work</h1></header>
 <div class="grid-container">
 </div>    
</section>

Codepen 链接中有更多详细信息。

Answer 1

您已为 .grid-container 指定了 margin: auto;。请更新:

margin: 0 auto;

或除 0 以外的任何其他值

如果您将使用 margin: auto; 这意味着您会将所有边距设置为 auto

margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;

这意味着它将占用您案例中的全部可用空间。