以CSS网格为中心

Question

我正在尝试使用CSS Grid创建一个简单的页面。

我未能做的是将HTML中的文本居中到相应的网格单元格。

我尝试将内容放在div和left_bg选择器内外的单独right_bg内，并且使用某些CSS属性无效。

我该怎么做？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Answer 1

这个答案有两个主要部分：

1. 了解CSS Grid中的对齐方式。
2. 在CSS Grid中居中的六种方法。

如果您只对解决方案感兴趣，请跳过第一部分。

网格布局的结构和范围

要完全了解中心在网格容器中的工作原理，首先要了解网格布局的结构和范围非常重要。

网格容器的HTML 结构有三个级别：

• 容器
• 项目
• 内容

在应用网格属性方面，每个级别都独立于其他级别。

网格容器的范围仅限于父子关系。

这意味着网格容器始终是父级，网格项始终是子级。网格属性仅在此关系中起作用。

子项之外的网格容器的后代不是网格布局的一部分，并且不接受网格属性。 （至少在实现subgrid功能之前，这将允许网格项的后代尊重主容器的行。）

这是上述结构和范围概念的一个例子。

想象一下类似于tic-tac-toe的网格。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}



您希望X＆O和O在每个单元格中居中。

因此，您应在容器级别应用居中：

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

但由于网格布局的结构和范围，容器上的justify-items将网格项目居中，而不是内容（至少不是直接）。



＆＃13;
＆＃13;
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}
＆＃13;
<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>
＆＃13;
＆＃13;
＆＃13;

与align-items相同的问题：内容可能会以副产品为中心，但您已经失去了布局设计。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}



＆＃13;
＆＃13;
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}
＆＃13;
<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>
＆＃13;
＆＃13;
＆＃13;

要使内容居中，您需要采取不同的方法。再次参考网格布局的结构和范围，您需要将网格项视为父项，将内容视为子项。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}



＆＃13;
＆＃13;
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}
＆＃13;
<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>
＆＃13;
＆＃13;
＆＃13;

jsFiddle demo

CSS网格中心的六种方法

有多种方法可以使网格项目及其内容居中。

这是一个基本的2x2网格：

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

Flexbox的

使用flexbox以简单方便的方式集中网格项的内容。

更具体地说，将网格项目变为弹性容器。

此方法没有冲突，规范违规或其他问题。它干净而有效。

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

有关完整说明，请参阅此帖：

• How to Center Elements Vertically and Horizontally in Flexbox

网格布局

与flex项目也可以是flex容器的方式相同，网格项也可以是网格容器。此解决方案类似于上面的flexbox解决方案，除了使用网格而不是flex属性进行居中。

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

auto页边距

将margin: auto用于垂直和水平居中的网格项目。

grid-item {
  margin: auto;
}

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

要使您需要将项目内容放入网格（或flex）容器中心，将匿名项目包装在其自己的元素（since they cannot be directly targeted by CSS）中，并将边距应用于新元素。< / p>

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

框对齐属性

在考虑使用以下属性对齐网格项时，请阅读上面auto边距上的部分。

• align-items
• justify-items
• align-self
• justify-self

https://www.w3.org/TR/css-align-3/#property-index

text-align: center

要在网格项中水平居中内容，您可以使用text-align属性。

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

请注意，对于垂直居中，vertical-align: middle将无效。

这是因为vertical-align属性仅适用于内联和表格单元容器。

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

有人可能会说display: inline-grid建立了一个内联级容器，这是真的。那么为什么没有vertical-align在网格项中工作呢？

原因是在grid formatting context中，项目被视为块级元素。

  

6.1. Grid Item Display

     

网格项的display值为 已封锁 ：如果   生成a的元素的in-flow子节点的指定display   grid container是一个内联级别的值，它计算它的值   块级等价物。

在block formatting context中vertical-align属性最初设计的内容，浏览器不希望在内联级容器中找到块级元素。这是无效的HTML。

CSS定位

最后，还有一个通用的CSS中心解决方案也适用于网格：绝对定位

这是一种很好的方法，可以将需要从文档流中删除的对象居中。例如，如果您想：

• Center text over an image或
• Place asterisks (*) above required form fields

只需在要居中的元素上设置position: absolute，在要充当包含块的祖先上设置position: relative（它通常是父级）。像这样：

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;
＆＃13;
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
＆＃13;
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>
＆＃13;
＆＃13;
＆＃13;

以下是此方法如何运作的完整说明：

• Element will not stay centered, especially when re-sizing screen

这里是关于网格规范中绝对定位的部分：

• https://www.w3.org/TR/css3-grid-layout/#abspos

Answer 2

您可以使用flexbox将文本居中。顺便说一下，不需要额外的容器，因为文本被视为匿名弹性项目。

来自flexbox specs：

  

flex container的每个流入子项都变为flex item，并且flex container中直接包含的每个连续文本都包含在匿名flex item中。但是，不会呈现仅包含white space的匿名弹性项（即可能受white-space属性影响的字符）（就像它是display:none一样）。

所以只需将网格项目设为弹性容器（display: flex），然后将align-items: center和justify-content: center添加到垂直和水平居中。

还执行了HTML和CSS的优化：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

＆＃13;

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

CSS place-items的简写属性分别设置align-items和justify-items属性。如果未设置第二个值，则第一个值也将被使用。

.parent {
  display: grid;
  place-items: center;
}

Answer 4

甚至不尝试使用flex;留在css网格！ ：）

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

正在这里做中心工作。

如果要将位于网格单元格内div内的内容居中，则需要定义嵌套网格以使其正常工作。 （请看那里显示的两个例子。）

https://css-tricks.com/snippets/css/complete-guide-grid/

干杯！

Answer 5

尝试使用flex：

Plunker演示：https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Answer 6

我知道这个问题已经有好几年了，但是我很惊讶地发现没有人提出建议：

podman run --net unifinet --ip 192.168.110.230 ...

这是比证明内容更通用的属性，并且绝对不是网格所独有的，但是我发现在处理文本时（这是该问题特别要求的），它使文本不居中对齐影响网格项目之间的空间或垂直居中。它在垂直轴上水平放置文本。我还发现它消除了一层证明内容和align-items增加的复杂性。 justify-content和align-items影响整个网格项，文本对齐使文本居中而不影响其所在的容器。希望这会有所帮助。

Answer 7

你想要这个吗？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>