使用 CSS 网格时如何垂直对齐 CSS 中的对象？

Question

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

我知道，对于网格容器，vertical-align没有作用。那么解决方案是什么？

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

Answer 1

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

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

Answer 2

不需要 table，为什么要将网格与 table 混合使用？

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

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

使用 CSS 网格时如何垂直对齐 CSS 中的对象？

How to vertically align objects in CSS when working with CSS grids?

css

css-grid