How to Center the Content in Grid

In this tutorial, we’ll demonstrate how to center the content in Grid. Below, you can see all the possible solutions to this problem. Let’s discuss them.

Solution with Flexbox

One of the easiest ways of centering the content of grid items is using Flexbox. Set the display to "grid" for the grid container, and "flex" for grid items. Then, add the align-items and justify-content properties, both with the "center" value, to grid items.

Example of centering the content in Grid with Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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://i.imgur.com/60PVLis.png" width="40" height="40" alt="image">
      </div>
      <div class="grid-item">
        <img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="image">
      </div>
    </div>
  </body>
</html>

Result

A centered text
A centered text
text
text

Solution with Grid Layout

This solution is similar to the previous, but here the centering is done with grid properties.

In the example below, we set the display of grid items to "grid", instead of "flex". Also, we use the justify-items property instead of justify-content.

Example of centering the content in Grid with Grid Layout:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

Solution with auto margins

You can also use the CSS margin property with its "auto" value to center grid items vertically and horizontally. Apply this property to the <span> and <img> elements. Set the display of grid items to "flex".

Example of centering the content in Grid with auto margins:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>

Solution with the CSS text-align property

Use the text-align property with the "center" value to center the content of grid items horizontally. Apply it to the grid container.

Example of horizontally centering the content in Grid with the text-align property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>
For vertical centering, the vertical-align property with the "middle" value will not work, as it is only used for inline and table-cell containers.

Solution with the CSS position property

This solution allows you to center elements that must be removed from the document flow. Set the position property to "absolute" on the element that must be centered, and use the "relative" value on the ancestor that serves as a containing block.

Example of centering the content in Grid with the position property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
      <grid-item><img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="text"></grid-item>
    </grid-container>
  </body>
</html>