We’ll look at horizontal and vertical alignment basics using various HTML and CSS properties.

Ways to horizontally align items using CSS

Using text-align property

This is used to horizontally align text within a block-level element, such as a <div> or <p> tag.

p {
  font-size: 40px;
  text-align: center;
}

Using the margin property

This property is used to horizontally adjust the block-level HTML elements with a certain width. If the container has a fixed width and/or height, this will work. Example :

.container {
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
}

Using the CSS Flexbox Property

This is by far the most important property. You can achieve horizontal alignment by setting the display : flex property first and then using the justify-content property. Flexbox properties are written only on the parent container so that the child containers behave accordingly. Here’s how :

<div class="container">
      <div class="box"></div>
      <div class="box-2"></div>
</div>

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

.box {
  background: red;
  width: 250px;
  height: 250px;
}

.box-2 {
  background: yellow;
  width: 250px;
  height: 250px;
}

Now the red and the yellow boxes will align at the center horizontally.

Using the CSS Grid Layout

This is used to create a grid-based layout which also works fine for horizontal alignment. Here’s an example :

 <div class="container">
      <div class="box"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
 </div>

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
}

.box {
  background: red;
  width: 250px;
  height: 250px;
}

.box-2 {
  background: yellow;
  width: 250px;
  height: 250px;
}

.box-3 {
  background: green;
  width: 250px;
  height: 250px;
}

The code needs to be written on the parent container just like in flexbox.

Ways to vertically align items using CSS

Using CSS Flexbox property

We have to have block-level elements in a parent-child hierarchy first like <div> or <p> and then we can use the following flexbox properties inside the parent block as given in the example :

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Using the CSS Grid Layout

Here’s how to vertically align containers using CSS grid :

<div class="container">
      <div class="box"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
</div>

.container {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-content: center;
}

.box {
  background: red;
  width: 250px;
  height: 250px;
}

.box-2 {
  background: yellow;
  width: 250px;
  height: 250px;
}

.box-3 {
  background: green;
  width: 250px;
  height: 250px;
}

Using the vertical-align property

You can use the vertical-align property which can be used in some cases like inside the table cell elements if you’ve created a table. In other cases, you have to test them manually to see if it works.

.container {
  vertical-align: middle;
}

Using position : absolute and position : relative

Here’s an example to explain the same :

<div class="container">
      <div class="child-element">This is a box</div>
</div>

.container {
  position: relative;
  height: 300px;
  border: 2px solid black;
}

.child-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Other methods to use

Here are some other methods for alignment :

margin : 0 auto;
justify-content: space-between; /* inside flexbox */
justify-content: space-around; /* inside flexbox */
justify-content: space-evenly; /* flexbox property */