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

问题描述

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

我尝试在 div > left_bg 和 right_bg 选择器并使用一些CSS属性无济于事。

我该如何做到这一点？

  {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;网格列：1/1;网格行：1/1; z-index：0;}。right_bg {display：subgrid; background-color：＃ecf0f1;网格列：2/2; grid_row：1/1; z-index：0;}。left_text {grid-column：1/1;网格行：1/1;位置：相对; z-index：1; justify-self：center; font-family：Raleway; font-size：large;}。right_text {grid-column：2/2; grid_row：1/1;位置：相对; z-index：1; justify-self：center; font-family：Raleway; font-size：large;}  

< div class = 容器 > <！ - 页面上的所有内容 - > < div class =left_bg> <！ - 页面的左侧背景颜色 - > < / div>< / div>< div class =right_bg> <！ - 页面的正确背景颜色 - >< / div>< div class =left_text> <！ - 左侧文本内容 - > < p>查看我的资料< / p> < div class =right_text> <！ - 右侧文字内容 - > < p>雇用我！< / p> < / div>< / div>

解决方案

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

1. 了解对齐方式在CSS网格中的工作方式。


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

   ---

   
   
   

   网格布局的结构和范围

   
   
   

   充分了解如何在网格容器中进行居中工作，首先了解网格布局的结构和范围很重要。

   
   
   

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

   
   
   • 容器
   
   
   • 项目
   
   
   • 内容
   
   
   
   
   

   在应用网格属性方面，每个级别都与其他级别无关。

   
   
   

   网格容器的范围仅限于父子rel
   
   

   这意味着网格容器始终是父网格，而网格物件始终是子网。网格属性只能在这种关系中使用。

   
   
   

   子网之外的网格容器的后代不属于网格布局，不会接受网格属性。 （至少在

   
   
   

   您希望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 在容器中心的网格项目，而不是内容（至少不是直接）。

   
   
   

   
   $ b

   article {display：inline -格; 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> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> < 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> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> < section> X< / section>< / article>

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

     article {
    display：inline-grid; 
    grid-template-rows：100px 100px 100px; 
    grid-template-columns：100px 100px 100px; 
    grid-gap：3px; 
   } 
    
   部分{
    display：flex; 
    justify-content：center; 
    align-items：center; 
    border：2px纯黑色; 
    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;边框：2px纯黑色; font-size：3em;}

   < article> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> <节> X< /节> <节> O< /节> < section> X< / section>< / article>

   jsFiddle演示

   
   
   
   
   

   在CSS网格中居中的六种方法

   
   
   

   有多种方法可以使网格物件及其内容居中。 p>
   
   

   以下是一个基本的2x2网格：
   
   

     grid-container {display：grid; grid-template-columns：1fr 1fr; grid-auto-rows：75px; grid-gap：10px;} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}  

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   
$ b

   Flexbox

   
   
   

   使用flexbox可以简单方便地将网格物件的内容居中。
   
   

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

   
   
   

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

   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 * /} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   



   ：
   
   

   
   
   • 如何将元素垂直居中和水平居中在Flexbox中
   
   
   
   
   

   ---

   
   
   

   网格布局

   
   
   

   与flex项目也可以是flex容器相同，grid项目也可以是网格容器。此解决方案与上面的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 * /} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}  

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   
$ b b

   auto 利润率

   
   
   

   使用保证金：自动到垂直和水平居中的网格项目。

   grid-item {
margin：汽车;
}


   <覆盖> grid-container {display：grid; grid-template-columns：1fr 1fr; grid-auto-rows：75px; grid-gap：10px;} grid-item {margin：auto;} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   
   
   

   您需要将项目制作为网格（或弹性）容器，将匿名项目包装到自己的元素中（，因为它们不能直接被

   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;} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>< span>此文字应居中< / span>< / grid-item> < grid-item>< span>此文字应居中< / span>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   
$ b b

   框对齐属性

   
   
   

   当考虑使用以下属性来对齐网格项时，请阅读 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 * /} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   



   code> vertical-align：middle 将不起作用。

   
   
   

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

   
   
   

   grid-container {display：grid; grid-template-columns：1fr 1fr; grid-auto-rows：75px; grid-gap：10px; text-align：center; / *< --- works * / vertical-align：middle; / *< --- failed * /} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>此文字应居中< / grid-item> < grid-item>此文字应居中< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   可以说 display：inline-grid 建立一个内联级别的容器，这是真的。那么为什么 vertical-align 不能在网格项目中工作？

   
   
   

   原因是在 网格格式化上下文 ，项目被视为块级元素。
   

   
   

   6.1。 Grid Item
   Display

   
   
   

   网格项目的显示值如果
   指定显示产生$的元素的流入子元素，则 blockified b $ b grid容器是一个内嵌级别的值，它计算出它的
   块级别的等价值。

   
   

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

   
   
   

   ---

   
   
   

   CSS定位

   
   
   

   最后，一个通用的CSS集中解决方案，也可以在Grid中工作：绝对定位

   
   
   

   这是一个很好的方法，用于将需要从文件流程。例如，如果您想要：
   
   

   
   
   • 在图片上居中显示文字，或者
   
   
   • 将星号（*）放在所需表格的上方
   
   
   
   
   

   只需在元素上设置 position：absolute 即可以祖先为中心，位置：相对作为包含区块（通常是父区）。像这样：
   
   

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

span {
position：absolute;
剩下：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;剩下：50％;顶部：50％; transform：translate（-50％，-50％）;} / *可以忽略下面的样式;仅装饰* / grid-container {background-color：lightyellow; border：1px solid #bbb; padding：10px;} grid-item {background-color：lightgreen; border：1px solid #ccc;}

   < grid-容器> < grid-item>< span>此文字应居中< / span>< / grid-item> < grid-item>< span>此文字应居中< / span>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item> < grid-item>< img src =http://i.imgur.com/60PVLis.pngwidth =50height =50alt =>< / grid-item><<< ; / grid-container>

   下面是关于这个的完整解释方法有效：



   

   • 元素不会保持居中，尤其是在重新调整屏幕大小时
   
   
   
   
   

   以下是Grid规范中绝对定位的部分：

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

   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. Six methods for centering in CSS Grid.

   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:

   • How to Center Elements Vertically and Horizontally in Flexbox

   ---

   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:

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

   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:

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

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

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

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