This article will demonstrate seven various approaches to vertical and horizontal content centering using HTML and CSS, given in chronological sequence from the traditional approaches (which we usually omit now) to the contemporary approaches.

1. Using Table

In the early days, before a straightforward method for centering elements existed, we relied on tables as a workaround to achieve both vertical and horizontal centering. Although this approach was far from ideal, it was the only available option back then.

The concept involved creating a table with a sole cell and applying vertical and horizontal centering to that particular cell.

<table>
  <tr>
    <td>
      Centered me
    </td>
  </tr>
</table>

table {
  width: 100%;
  height: 100%;
}

td {
  vertical-align: center;
  text-align: center;
}

1. Using position: relative, absolute, and offset values

One way to center a div is by utilizing the CSS position property. By setting the parent div to position: relative and the child div to position: absolute, along with appropriate offset values using top and left properties, we can achieve a centered effect.

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    position: relative;
}
.childContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1. Using Flexbox and justify-content, align-items

CSS Flexbox provides powerful alignment capabilities. By applying display: flex to the parent div and setting justify-content: center and align-items: center, we can easily center the child div both horizontally and vertically.

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

1. Using Flexbox and justify-content, align-self

Similar to the previous method, we can use Flexbox and justify-content: center in the parent div. Additionally, setting align-self: center for the child div allows individual alignment control along the cross-axis.

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
}
.childContainer {
      align-self: center;
}

1. Using Flexbox and Margin: auto

Flexbox, combined with margin auto, offers an efficient way to center a div. By applying display: flex to the parent div and setting margin: auto for the child div, the remaining space is evenly distributed, resulting in a centered effect.

Note: we can achieve the same result using display: grid and margin: auto as well

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    display: flex;
}
.childContainer {
      margin: auto;
}

1. Using CSS Grid and place-items

CSS Grid offers the place-items property, which allows setting both align-items and justify-items in a single declaration. By applying display: grid to the parent div and setting place-items: center, we can conveniently center the child div.

Except for Internet Explorer, All browser support place-items: center property

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    display: grid;
    place-items: center;
}

1. Using CSS Grid and place-self

CSS Grid's place-self property combines both align-self and justify-self properties in a single declaration. Applying place-self: center to the child div centers it both vertically and horizontally within the grid.

Except for Internet Explorer, All browser support place-self: center property

<div class="parentContainer">
    <div class="childContainer">center me</div>
</div>

.parentContainer {
    background: tomato;
    height: 300px;
    width: 300px;
    display: grid;
}
.childContainer {
    place-self: center;
}

Conclusion

A useful and important skill is understanding how to center in CSS. In your work as a web developer, you will eventually need to utilize it.

In this blog post, we have explored 7 different methods to center a div using CSS. These techniques involve using the CSS position property, Table, Flexbox, and CSS Grid. By understanding and applying these methods, you can easily center div elements in your web development projects. You can experiment with these techniques to find the approach that best suits your needs.

Happy coding!