Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

更多信息：

Answer 2

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>

Answer 3

如果你这样做会更好

＆＃13;

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

＆＃13;

Answer 4

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

在这种情况下，我们只给.maingrid显示：flex，高度和中心内容。

然后让.centert将它自己调整到他父亲元素的中间，如下所示。

希望有所帮助，

＆＃13;

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

＆＃13;

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

＆＃13;

垂直和水平居中网格容器

4 个答案: