垂直和水平居中网格容器

Question

令人惊讶的是，我在网上找不到任何相关信息。也许我错过了什么。您如何使用 CSS Grid 水平和垂直居中整个主包装器，并且显然保持响应能力？

 .wrapper {
  display: grid;
  grid-template-columns: minmax(100vw, 1fr);
  grid-template-rows: minmax(100vh, 1fr);
  align-items: center;
  justify-content: center;
}

 <div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

使用上面的 CSS， div 垂直居中，但不是水平居中。

以下 CSS 将 div 水平居中，但不是垂直居中：

 .maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

 <div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

原文由 parsa_047Fletcher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是 justify-content: center 使用 justify-items: center 。

 .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center; /* adjusted */
}

 <div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

在你的第二个例子中，你说：

以下 CSS 将 div 水平而不是垂直居中。

那是因为容器没有额外的高度。行是内容的高度。而不是 grid-template-rows: 1fr 尝试类似 grid-template-rows: 100vh 的东西。

 .maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-content: center;
}

.centerthis {
  align-self: center;
  justify-self: center;
}

body {
  margin: 0;
}

 <div class="maingrid">
  <div class="centerthis">loremloremlorem</div>
</div>

更多信息：

• 网格布局中的 align-items 与 align-content 有什么区别？
• 在 CSS 网格中居中

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

而不是使用

  align-items: center;
  justify-items: center;

您可以使用

  place-items: center;

 .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh;
        place-items: center;
        border: 2px solid;
       }

 <div class="wrapper">
  <div class="centerthis">loremloremlorem</div>
</div>

原文由 Anil Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议