使用 CSS 网格时，如何在 CSS 中垂直对齐对象?

Question

我最近遇到了这个问题。假设我有一个简单的<h1>标签，我想让它垂直居中，所以即使我重新调整窗口的大小，它也会保留在我的一个网格框行的中间，忽略其水平位置。

我知道，当涉及到网格容器时，vertical-align没有影响。那么解决方案是什么？

这个问题已被标记为重复，但是，另一个问题询问的是水平居中文本，而在这里，我问的是垂直居中。

Answer 1

不需要表格，为什么要将网格与表格混合？

您可以使用align-items:center来实现垂直居中。

如果网格单元格本身<h1>，则可以使用align-self:center将内容垂直居中放入<h1>

Answer 2

好问题 - 我设法使用包装器并使用 display： table 解决了这个问题

https://jsfiddle.net/8vjvnznk/

.wrapper {
display: grid;
grid-template-columns: 100px 100px 300px;
grid-template-rows: 200px 200px;
grid-gap: 10px;
background-color: #fff;
color: #444;
align-content: space-evenly;
}
.workaround{
border: 1px solid green;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: table;

}
h1{
font-size: 1em;
border: 1px solid yellow;
display: table-cell;
vertical-align: middle;
}
#boxc{
background: red;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 100%;
}

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c" id="boxc">
<div class="workaround">
<h1>
The heading in question!
</h1>
</div>
</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>