CSS Align Items in Center with Examples

CSS Align Items in Center with Examples

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 4 mins read

The align-items property in CSS is used to align the items within a container. The center value of the align-items property aligns the items along the vertical axis so that they are centered within the container. Here is an example of using the align-items: center property:

.container {
  align-items: center;
}

This will align the items within the container along the vertical axis so that they are centered within the container.

Here is an example of how you can use this CSS code to align the items within a container:

<div class="container">
  <p>This is an item.</p>
  <p>This is another item.</p>
  <p>This is yet another item.</p>
</div>
.container {
  align-items: center;
}

This will align the items within the container along the vertical axis, so that they are centered within the container. The output of this code would be similar to the following:

|   This is an item.   |
| This is another item. |
| This is yet another  |
|       item.          |

Here are some more examples of using the align-items: center property in combination with other CSS properties to create more complex and flexible layouts:

/* Use a flex layout and align items along both the horizontal and vertical axes */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Use a grid layout and align items along the vertical axis */
.container {
  display: grid;
  align-items: center;
}

/* Use a multi-column layout and align items along the vertical axis */
.container {
  column-count: 3;
  align-items: center;
}

These examples demonstrate how you can use the align-items: center property in combination with other CSS properties, such as display, justify-content, and column-count, to create more complex and flexible layouts. You can use these techniques to create user-friendly and responsive interfaces in your web applications.

Align Buttons in Center

To align buttons in the center of a container using CSS, you can use the text-align: center property to center the buttons along the horizontal axis, and the align-items: center property to center the buttons along the vertical axis. Here is an example of using these properties:

.container {
  text-align: center;
  align-items: center;
}

This will align the buttons within the container along both the horizontal and vertical axes, so that they are centered within the container.

Here is an example of how you can use this CSS code to align buttons within a container:

<div class="container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>
.container {
  text-align: center;
  align-items: center;
}

This will align the buttons within the container along both the horizontal and vertical axes, so that they are centered within the container. The output of this code would be similar to the following:

|       Button 1       |
|       Button 2       |
|       Button 3       |

You can also use the text-align: center and align-items: center properties in combination with other CSS properties, such as display: flex and justify-content, to create more complex and flexible layouts. For example:

.container {
  display: flex;
  justify-content: center;}

Align Div in Center

To align a div in the center of a container using CSS, you can use the margin: auto property to center the div along both the horizontal and vertical axes. Here is an example of using the margin: auto property:

.container {
  margin: auto;
}

This will align the div within the container along both the horizontal and vertical axes, so that it is centered within the container.

Here is an example of how you can use this CSS code to align a div within a container:

<div class="container">
  <div>This is a div.</div>
</div>
.container {
  margin: auto;
}

This will align the div within the container along both the horizontal and vertical axes so that it is centered within the container. The output of this code would be similar to the following:

|          This is a div.         |

You can also use the margin: auto property in combination with other CSS properties, such as display: flex and justify-content, to create more complex and flexible layouts. For example:

.container {
  display: flex;
  justify-content: center;
  margin: auto;
}

This will set the container to use a flex layout and center the div within the container along horizontal and vertical axes. You can use these techniques to create user-friendly and responsive interfaces in your web applications.

Related: