在 CSS 网格（Grid）中进行居中操作

我试图用CSS网格创建一个简单的页面。

我没有做到的是将HTML中的文本集中到各自的网格单元格中。

我曾尝试将内容分别放在left_bg和right_bg选择器内外的__abc0中，并尝试了一些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;
}
























Review my stuff







Hire me!

640575 次浏览
小开

你想要这个?

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>

小开

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

从flexbox规格:

flex容器的每个流中的子对象都成为flex项目，而直接包含在flex容器中的每个连续文本运行都被包装在匿名的flex项目中。然而，只包含空白(即可以受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>

小开

尝试使用flex:

活塞演示: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;
}

超文本标记语言

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

甚至不要尝试使用flex和css网格。只需在content元素上添加以下内容:

place-self: center;

它会在这里做居中工作。

如果你想在网格单元内的div内居中，你需要定义嵌套网格以使其工作。 这两个例子都显示在演示.

. conf中

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

小开
最佳答案

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

  1. 了解如何对齐工作在CSS网格。
  2. CSS网格中的六种定心方法。

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

网格布局的结构和范围

为了充分理解网格容器中的居中工作原理，首先了解网格布局的结构和范围是很重要的。

网格容器的HTML 结构有三层:

  • 容器
  • 项目
  • 的内容

就应用网格属性而言，每一层都独立于其他层。

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

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

网格容器子容器以外的子容器不是网格布局的一部分，并且不接受网格属性。(至少在< >强subgrid < / >强特性实现之前不会，这将允许网格项的后代尊重主容器的行。)

下面是上面描述的结构和作用域概念的示例。

想象一个像井字一样的网格。

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

enter image description here

你希望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将网格项置于中心，而不是内容(至少不是直接置于中心)。

enter image description here

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

enter image description here

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

enter image description here

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网格定心的六种方法

网格项及其内容的居中有多种方法。

这是一个基本的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" 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>

Flexbox

使用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" 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>

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

网格布局

与伸缩项也可以是伸缩容器一样，网格项也可以是网格容器。这个解决方案类似于上面的flexbox解决方案，除了定心是用网格而不是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" 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>

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

为了使网格项的内容居中，您需要将该项制成网格(或伸缩)容器，将匿名项包装在它们自己的元素中(因为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" 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>

盒子对齐属性

当考虑使用以下属性来对齐网格项时，请阅读上面关于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" 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>

注意，对于垂直居中，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" 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>

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

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

6.1。电网项目 显示< /强> < / > < / p >

网格项的display值为< em > blockified < / em >:如果 的元素的流中子元素的指定display 网格容器是一个内联级的值，它计算到它 块级等价的。< / p >

在块格式化上下文中，即vertical-align属性最初设计的目的，浏览器并不期望在内联级容器中找到块级元素。这是无效的HTML。

CSS定位

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

对于需要从文档流中删除的对象，这是一种居中的好方法。例如，如果你想:

只需在要居中的元素上设置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" 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>

下面是这个方法的完整解释:

下面是关于Grid规范中绝对定位的部分:

小开

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

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

这招对我很管用:

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

小开

可以在父元素中使用place-items: center;属性将子元素设为文本位于中间。

.parent {
display:grid;
grid-template-columns: repeat(2,1fr);
border: 3px solid yellow;
grid-gap: 3px;
place-items: center;
}
 

.parent > div {
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
font-size: 2rem;
}
 


<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>

小开

将父元素设为一个网格，justify-content: center;和align-content: center;

<div class="parent">
<div class="child">child</div>
</div>




.parent {
height: 100px;
width: 100px;
border: 1px solid black;
display: grid;
justify-content: center;
align-content: center;
}




.child {
height: 20px;
width: 20px;
background-color: red;
}

提交答案