将网格容器垂直和水平居中答案

【问题标题】：Center a grid container vertically and horizontally将网格容器垂直和水平居中
【发布时间】：2018-03-10 04:42:36
【问题描述】：

令人惊讶的是，我在网上找不到任何关于此的信息。也许我错过了什么。您如何使用 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>

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

用justify-items: center代替justify-content: 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>

更多：

【讨论】：

【解决方案2】：

如果你这样做会更好

.wrapper {
  display: flex;
  flex-direction: row; // Not really necassary though
  justify-content: center; // Or you could use "space-around"
  align-items: center;
}

【讨论】：

【解决方案3】：

我建议你使用 flex-box，它是 CSS3 中一种新的布局模式。

在这种情况下，我们只需给 .maingrid display: flex、高度和内容居中。

然后让 .centerthis 将自己对齐到他的父元素的中间，如下所示。

希望对你有帮助，

.maingrid {
  display: flex;
  height: 100px;
  justify-content: center;
}

.centerthis {
  align-self: center;
}

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

【讨论】：

【解决方案4】：

2x2 网格中的 4 个项目的示例。

如果您想让您的物品在外部容器中变小；将width: 100% 更改为您喜欢的任何内容，并在您的CSS 中添加margin-top: 和margin-left:（例如：width: 70%、margin-top: 15%、margin-left: 15%。边距是剩余空间的一半，以保持居中)

#wrapper {
  position: absolute; 
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

【解决方案5】：

而不是使用

  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>

【讨论】：