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

Posted 2023-03-05

【中文标题】使用 CSS 网格时如何垂直对齐 CSS 中的对象？ [复制]

【英文标题】：How to vertically align objects in CSS when working with CSS grids? [duplicate]

【发布时间】：2018-01-15 16:28:54

【问题描述】：

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

我知道当涉及到网格容器时，vertical-align 没有任何作用。那么解决办法是什么呢？

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

【问题讨论】：

您没有提供代码示例，因此这里是有关对齐的相关 CSS Grid 文档：w3.org/TR/css-grid-1/#row-align（锚定 § 和后续的）和“css grid alignment”的 #1 结果，来自 R 的一篇文章. 安德鲁在 Smashing Mag

【参考方案1】：

不需要表格，为什么要混合表格和表格？

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

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

【讨论】：

不需要align-items 或align-self 需要display: flex？

是的，有什么问题？

CSS 网格也是弹性容器。请参阅本指南了解您可以使用哪些属性，其中包括 align-self 和 align-items：css-tricks.com/snippets/css/complete-guide-grid

align-self:center 以单元格本身为中心，而不是单元格内容。

当使用表格作为网格时，垂直对齐不起作用。然后`显示：网格； align-items: center;` 需要 td 和 th 垂直对齐。

【参考方案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>