如何使网格中的内容居中-之路教程

使用 CSS text-align 属性的解决方案

使用带有“center”值的 text-align 属性将网格项的内容水平居中。

将其应用于网格容器。

使用 text-align 属性在 Grid 中水平居中内容的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 60px;
        grid-gap: 20px;
        text-align: center;
      }      
      grid-container {
        background-color: #fff;
        border: 1px solid #666;
        padding: 20px;
      }      
      grid-item {
        background-color: #dce0dd;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <grid-container>
      <grid-item>A centered text</grid-item>
      <grid-item>A centered text</grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

对于垂直居中，带有“middle”值的 vertical-align 属性将不起作用，因为它仅用于内联和表格单元格容器。

具有自动边距的解决方案

我们还可以使用 CSS 边距属性及其“自动”值来垂直和水平居中网格项目。

将此属性应用于 <span> 和 <img> 元素。

将网格项目的显示设置为“flex”。

使用自动边距将 Grid 中的内容居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 60px;
        grid-gap: 20px;
      }      
      grid-item {
        display: flex;
      }      
      span,
      img {
        margin: auto;
      }      
      grid-container {
        background-color: #fff;
        border: 1px solid #666;
        padding: 20px;
      }      
      grid-item {
        background-color: #dce0dd;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <grid-container>
      <grid-item><span>A centered text</span></grid-item>
      <grid-item><span>A centered text</span></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

使用 CSS position 属性的解决方案

此解决方案允许我们将必须从文档流中删除的元素居中。
在必须居中的元素上将位置属性设置为“绝对”，并在用作包含块的祖先上使用“相对”值。

使用 position 属性将 Grid 中的内容居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 60px;
        grid-gap: 20px;
      }      
      grid-item {
        position: relative;
        text-align: center;
      }      
      span,
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }      
      grid-container {
        background-color: #fff;
        border: 1px solid #666;
        padding: 20px;
      }      
      grid-item {
        background-color: #dce0dd;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <grid-container>
      <grid-item><span>A centered text</span></grid-item>
      <grid-item><span>A centered text</span></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

如何使网格中的内容居中

在本教程中，我们将演示如何在 Grid 中居中显示内容。
在下面，我们可以看到此问题的所有可能解决方案。
让我们来讨论一下。

使用 Flexbox 的解决方案

使网格项的内容居中的最简单方法之一是使用 Flexbox。

将网格容器的显示设置为“grid”，将网格项目设置为“flex”。

然后，将 align-items 和 justify-content 属性（均带有“center”值）添加到网格项中。

使用 Flexbox 将 Grid 中的内容居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 60px;
        grid-gap: 20px;
      }
      .grid-item {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .grid-container {
        background-color: #fff;
        border: 1px solid #666;
        padding: 20px;
      }
      .grid-item {
        background-color: #dce0dd;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">A centered text</div>
      <div class="grid-item">A centered text</div>
      <div class="grid-item">
        <img src="http://onitroad.com/notebook.png" width="40" height="40" alt="image">
      </div>
      <div class="grid-item">
        <img src="http://onitroad.com/notebook.png" width="40" height="40" alt="image">
      </div>
    </div>
  </body>
</html>

网格布局解决方案

此解决方案与前一个类似，但此处的居中是通过网格属性完成的。

在下面的示例中，我们将网格项的显示设置为“grid”，而不是“flex”。
此外，我们使用 justify-items 属性而不是 justify-content。

使用网格布局将内容居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 60px;
        grid-gap: 20px;
      }      
      grid-item {
        display: grid;
        align-items: center;
        justify-items: center;
      }      
      grid-container {
        background-color: #fff;
        border: 1px solid #666;
        padding: 20px;
      }      
      grid-item {
        background-color: #dce0dd;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <grid-container>
      <grid-item>A centered text</grid-item>
      <grid-item>A centered text</grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://onitroad.com/notebook.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

日期：2020-06-02 22:14:59 来源：oir作者：oir

←如何在容器之间居中图像

如何使用 Flexbox 将内容垂直和水平居中→