如何在 CSS 网格项目中将文本垂直和水平居中？

Question

很奇怪 CSS 网格没有可以轻松做到这一点的属性（我的代码笔在这里：https://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>

如果我在 .container div 部分使用 align-self: center 和 justify-self: center，它会将框的大小缩小到内容的大小。

CSS 网格不应该具有诸如 grid-item-align:top center 之类的属性吗？我尽量不使用 90 年代的 CSS hacks 来做这个 cos' 这会破坏 CSS 网格的目的。

使用 flexbox，可以更轻松地将内容对齐到我想要的位置。

Answer 1

flex 和 grid 配合得很好。只需将您的 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>

如何在 CSS 网格项目中将文本垂直和水平居中？

How do I center text vertically and horizontally inside CSS grid items?

html

css

css-grid