在 CSS 网格中居中

Posted 2023-03-07

技术标签:

【中文标题】在 CSS 网格中居中【英文标题】：Centering in CSS Grid 【发布时间】：2021-11-29 00:53:46 【问题描述】：

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

我没有做的是将 html 中的文本居中到相应的网格单元格。

我尝试将内容分别放在 left_bg 和 right_bg 选择器内部和外部的 divs 中，并尝试使用一些 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>

【问题讨论】：

请查看链接w3.org/Style/Examples/007/center.en.html，希望对您有所帮助。 【参考方案1】：

你想要这个吗？

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>

【讨论】：

不完全。文本也应该垂直对齐。使用

.text font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);

【参考方案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 进行了优化：

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;

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

【讨论】：

【参考方案3】：

尝试使用弹性：

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>

【讨论】：

【参考方案4】：

甚至不要尝试使用 flex 并继续使用 css 网格。只需在内容元素上添加以下内容：

place-self: center;

它会在这里做定心工作。

如果您想将 div 内的网格单元格内的内容居中，您需要定义嵌套网格以使其工作。 demo 中显示的两个示例。

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

【讨论】：

我想知道嵌套网格。感谢您向我展示我猜它是如何完成的。所以你认为 flex 应该避免与 grid 一起使用还是可以结合使用？结合起来很好，但您需要确保使用正确的工具来完成这项工作。找点时间看一下 Rachels 的演讲，它会为你解释很多关于 CSS 网格的话题。 youtu.be/3vJE3bVoF-Q 当您在网格项目上使用边框时会出现这种方法的问题... 这可以缩短为place-self: center;。【参考方案5】：

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

了解对齐在 CSS Grid 中的工作原理。在 CSS Grid 中居中的六种方法。

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

网格布局的结构和范围

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

网格容器的 HTML 结构分为三个层次：

容器项目内容

就应用网格属性而言，这些级别中的每一个都独立于其他级别。

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

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

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

这是上述结构和范围概念的示例。

想象一个类似井字游戏的网格。

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

您希望 X 和 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 将网格项居中，而不是内容居中（至少不是直接）。

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;

<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>

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;

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;

<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>

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

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;

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;

<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>

jsFiddle demo

CSS Grid 中的六种居中方法

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

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

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

弹性盒

要使网格项目的内容居中，请使用 flexbox。

更具体地说，将网格项变成一个弹性容器。

此方法不存在冲突、规范违规或其他问题。它干净有效。

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

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

完整的解释请看这篇文章：

How to Center Elements Vertically and Horizontally in Flexbox

网格布局

就像弹性项目也可以是弹性容器一样，网格项目也可以是网格容器。这个解决方案类似于上面的 flexbox 解决方案，除了居中是使用 grid 属性完成的，而不是 flex 属性。

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

`auto`边距

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

grid-item 
  margin: auto;

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

要使网格项目的内容居中，您需要将项目放入网格（或弹性）容器中，将匿名项目包装在它们自己的元素中 (since they cannot be directly targeted by CSS)，并将边距应用于新元素。

grid-item 
  display: flex;


span, img 
  margin: auto;

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

框对齐属性

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

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

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

`text-align: center`

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

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

请注意，对于垂直居中，vertical-align: middle 将不起作用。

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

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

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

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

6.1. Grid Item Display

网格项的display 值为blockified：如果指定元素的流入子元素的 display，生成网格容器是一个内联级别的值，它计算到它的块级等效项。

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

CSS 定位

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

这是一种使需要从文档流中移除的对象居中的好方法。例如，如果您想：

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%);

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;

<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"   ></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png"   ></grid-item>
</grid-container>

以下是此方法工作原理的完整说明：

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

这是 Grid 规范中关于绝对定位的部分：

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

【讨论】：

是grid-container & grid-item 是HTML标签吗？它们是 自定义 HTML 标签。您可以创建自己的标签，就像我为本演示所做的那样。 ***.com/q/36380449/3597276@pro.mean 这是一个很好的答案，谢谢。这让我意识到，在你的前两个例子中，flex 和 grid 之间，align-items 保持不变，但由于某种原因，justify-content 变为 justify-items 这可能会提供有用的解释：The difference between justify-self, justify-items and justify-content@WoJ【参考方案6】：

CSS place-items 速记属性分别设置 align-items 和 justify-items 属性。如果没有设置第二个值，则也使用第一个值。

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

【讨论】：

place-items 目前在 edge 中不受支持被低估的答案。这正是我想要的！我正在寻找的唯一答案。谢谢@CloudBranch。 caniuse.com/?search=place-items Edge 支持现在应该没问题了。【参考方案7】：

这对我有用：

.d-grid 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid black;
  border-left: 1px solid black;


.d-grid div 
  height: 50px;
  display: flex;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  align-items: center;
  justify-content: center;

<div class="d-grid">
  <div>text 1</div>
  <div>text 2</div>
  <div>text 3</div>
  <div>text 4</div>
  <div>text 5</div>
  <div>text 6</div>
</div>

【讨论】：

以上是关于在 CSS 网格中居中的主要内容，如果未能解决你的问题，请参考以下文章

如何让DIV层在网页中居中显示

需要在 CSS 中居中对齐图像

如何在 HTML/CSS 中居中一组图像？

如何让Markdown图片居中

将网格控件中的多边形居中

css，如何让span中的两个span垂直居中排列。

在 CSS 网格中居中

网格布局的结构和范围

CSS Grid 中的六种居中方法

弹性盒

网格布局

auto边距

框对齐属性

text-align: center

CSS 定位

`auto`边距

`text-align: center`