我如何在CSS网格项目中垂直和水平的水平中心文本？

Question

奇怪的是，CSS网格没有可以轻松执行此操作的属性（我的Codepen： htttps：htttps：// codepen.io/chiz/pen/dydezpz ）。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
}

.container div {
  background-color: gray;
  height: 100px;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

如果我使用align-felt：中心和合理：中心 内部.container div part，它会缩小盒子的尺寸到内容的大小。

CSS网格是否应该具有诸如Grid-Item-Align之类的属性：顶级中心的东西？ 我试图不使用90年代的CSS hacks来执行这种cos'，这将破坏CSS网格的目的。

使用Flexbox，将我想要的东西对齐要容易得多。

Answer 1

Flex和网格一起工作。只需在所需的项目上应用您的flex - 位置属性即可。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
}

.container div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  height: 100px;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

Answer 2

在容器上使用网格时，您可以在项目上使用Flexbox。由于Flexbox通常更适合对齐任何东西。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
}

.container div {
  background-color: gray;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>