在 CSS 网格中居中 [英] Centering in CSS Grid

查看：27
本文介绍了在 CSS 网格中居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 CSS 网格创建一个简单的页面.

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

我尝试将内容分别放在 left_bg 和 right_bg 选择器的内部和外部的 div 中，并尝试使用一些CSS 属性无效.

我该怎么做?

html,身体 {边距:0；填充:0；}.容器 {显示:网格；网格模板列:1fr 1fr；网格模板行:100vh；网格间隙:0px 0px；}.left_bg {显示:子网格；背景色:#3498db；网格列:1/1；网格行:1/1；z-索引:0；}.right_bg {显示:子网格；背景颜色:#ecf0f1；网格列:2/2；grid_row: 1/1;z-索引:0；}.left_text {网格列:1/1；网格行:1/1；位置:相对；z-索引:1；证明自我:中心；字体系列:Raleway；字体大小:大；}.right_text {网格列:2/2；grid_row: 1/1;位置:相对；z-索引:1；证明自我:中心；字体系列:Raleway；字体大小:大；}

<!--页面上的所有内容--><div class="left_bg"><!--页面的左背景色-->

<div class="right_bg"><!--页面右侧背景色-->

<div class="left_text"><!--左侧文本内容--><p>查看我的东西</p><div class="right_text"><!--右侧文本内容--><p>雇用我！</p>

解决方案

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

  1. 了解对齐方式在 CSS Grid 中的工作原理.
  2. 在 CSS Grid 中居中的六种方法.

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

<小时>

网格布局的结构和范围

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

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

在应用网格属性方面，这些级别中的每一个都独立于其他级别.

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

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

网格容器之外的子代不是网格布局的一部分，并且不会接受网格属性.(至少在

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

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

article {显示:内联网格；网格模板行:100 像素 100 像素 100 像素；网格模板列:100 像素 100 像素 100 像素；网格间距:3px；justify-items:居中；}

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

article {显示:内联网格；网格模板行:100 像素 100 像素 100 像素；网格模板列:100 像素 100 像素 100 像素；网格间距:3px；justify-items:居中；}部分 {边框:2px纯黑色；字体大小:3em；}

article {显示:内联网格；网格模板行:100 像素 100 像素 100 像素；网格模板列:100 像素 100 像素 100 像素；网格间距:3px；justify-items:居中；对齐项目:居中；}部分 {边框:2px纯黑色；字体大小:3em；}
article {显示:内联网格；网格模板行:100 像素 100 像素 100 像素；网格模板列:100 像素 100 像素 100 像素；网格间距:3px；}部分 {显示:弹性；对齐内容:居中；对齐项目:居中；边框:2px纯黑色；字体大小:3em；}
<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 演示
<小时>
在 CSS Grid 中居中的六种方法
有多种方法可以使网格项及其内容居中.
这是一个基本的 2x2 网格:
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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-item {显示:弹性；对齐项目:居中；对齐内容:居中；}
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}网格项{显示:弹性；/* 新的 */对齐项目:居中；/* 新的 */对齐内容:居中；/* 新的 */}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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 解决方案，除了居中是通过 grid 而不是 flex 属性完成的.
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}网格项{显示:网格；/* 新的 */对齐项目:居中；/* 新的 */justify-items:居中；/* 新的 */}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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>
<小时>
自动边距
使用 margin: auto 垂直和水平居中网格项.
grid-item {保证金:自动；}
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}网格项{保证金:自动；}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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 {显示:弹性；}跨度，图像{保证金:自动；}
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}网格项{显示:弹性；}跨度，图像{保证金:自动；}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item><span>这个文本应该居中</span></grid-item><grid-item><span>这个文本应该居中</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 属性.
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；文本对齐:居中；/* 新的 */}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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 {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；文本对齐:居中；/* <--- 有效 */垂直对齐:中间；/* <--- 失败 */}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item>这个文本应该居中</grid-item><grid-item>这个文本应该居中</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 在网格项中不起作用?
原因是在网格格式上下文，项目被视为块级元素.
<块引用>
6.1.网格项显示
网格项的display 值是块化:如果指定的 display 元素的流入子元素生成网格容器是一个内联级值，它计算到它的块级等效.
在块格式上下文，vertical-align 属性最初是为它设计的，浏览器不希望在内联级容器中找到块级元素.这是无效的 HTML.
<小时>
CSS 定位
最后，有一个通用的 CSS 居中解决方案也适用于网格:绝对定位 
这是将需要从文档流中删除的对象居中的好方法.例如，如果您想:
只需在要居中的元素上设置 position: absolute ，在将用作包含块的祖先(通常是父级)上设置 position:relative .像这样:
grid-item {位置:相对；文本对齐:居中；}跨度 {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}
grid-container {显示:网格；网格模板列:1fr 1fr；网格自动行:75px；网格间距:10px；}网格项{位置:相对；文本对齐:居中；}跨度，图像{位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；}/* 可以忽略下面的样式；仅装饰*/网格容器{背景颜色:浅黄色；边框:1px 实心 #bbb；填充:10px；}网格项{背景颜色:浅绿色；边框:1px 实心 #ccc；}
<grid-item><span>这个文本应该居中</span></grid-item><grid-item><span>这个文本应该居中</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>
以下是此方法工作原理的完整说明:
这是网格规范中关于绝对定位的部分:
I'm trying to create a simple page with CSS Grid.



What I'm failing to do is center the text from the HTML to the respective grid cells.



I've tried placing content in separate divs both inside and outside of the left_bg and right_bg selectors and playing with some of the CSS properties to no avail.



How do I do this?







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>






 解决方案 
This answer has two main sections:
    

  1. Understanding how alignment works in CSS Grid.
    2. 

  2. Six methods for centering in CSS Grid.
    3. 

If you're only interested in the solutions, skip the first section.






The Structure and Scope of Grid layout



To fully understand how centering works in a grid container, it's important to first understand the structure and scope of grid layout.



The HTML structure of a grid container has three levels:



    

  • the container
    • 

  • the item
    • 

  • the content
    • 




Each of these levels is independent from the others, in terms of applying grid properties.



The scope of a grid container is limited to a parent-child relationship.



This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.



Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties. (At least not until the subgrid feature has been implemented, which will allow descendants of grid items to respect the lines of the primary container.)



Here's an example of the structure and scope concepts described above.



Imagine a tic-tac-toe-like grid.
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}




You want the X's and O's centered in each cell.



So you apply the centering at the container level:
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

But because of the structure and scope of grid layout, justify-items on the container centers the grid items, not the content (at least not directly).










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>









Same problem with align-items: The content may be centered as a by-product, but you've lost the layout design.
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>









To center the content you need to take a different approach. Referring again to the structure and scope of grid layout, you need to treat the grid item as the parent and the content as the child.
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






Six Methods for Centering in CSS Grid



There are multiple methods for centering grid items and their content.



Here's a basic 2x2 grid:







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



For a simple and easy way to center the content of grid items use flexbox.



More specifically, make the grid item into a flex container.



There is no conflict, spec violation or other problem with this method. It's clean and valid.
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>









See this post for a complete explanation:








Grid Layout



In the same way that a flex item can also be a flex container, a grid item can also be a grid container. This solution is similar to the flexbox solution above, except centering is done with grid, not flex, properties.







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 margins



Use margin: auto to vertically and horizontally center grid items.
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>









To center the content of grid items you need to make the item into a grid (or flex) container, wrap anonymous items in their own elements (since they cannot be directly targeted by CSS), and apply the margins to the new elements.
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>












Box Alignment Properties



When considering using the following properties to align grid items, read the section on auto margins above.



    

  • align-items
    • 

  • justify-items
    • 

  • align-self
    • 

  • justify-self
    • 




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






text-align: center



To center content horizontally in a grid item, you can use the text-align property.







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>









Note that for vertical centering, vertical-align: middle will not work.



This is because the vertical-align property applies only to inline and table-cell containers.







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>









One might say that display: inline-grid establishes an inline-level container, and that would be true. So why doesn't vertical-align work in grid items? 



The reason is that in a grid formatting context, items are treated as block-level elements.

  
6.1. Grid Item
  Display

  
  
The display value of a grid item is blockified: if the
  specified display of an in-flow child of an element generating a
  grid container is an inline-level value, it computes to its
  block-level equivalent.


In a block formatting context, something the vertical-align property was originally designed for, the browser doesn't expect to find a block-level element in an inline-level container. That's invalid HTML.






CSS Positioning



Lastly, there's a general CSS centering solution that also works in Grid: absolute positioning 



This is a good method for centering objects that need to be removed from the document flow. For example, if you want to:





Simply set position: absolute on the element to be centered, and position: relative on the ancestor that will serve as the containing block (it's usually the parent). Something like this:
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>









Here's a complete explanation for how this method works:





Here's the section on absolute positioning in the Grid spec:




                        
这篇关于在 CSS 网格中居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆