How to Center a Div with CSS – 7 Different Ways

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.

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;
}

https://codepen.io/yatharthaa/pen/NWEYMeK

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%);
}

https://codepen.io/yatharthaa/pen/LYXdmJe

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;
}

https://codepen.io/yatharthaa/pen/QWJmrYw

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;
}

https://codepen.io/yatharthaa/pen/NWEYMZP

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;
}

https://codepen.io/yatharthaa/pen/oNQqyNM

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;
}

https://codepen.io/yatharthaa/pen/OJavEML

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;
}

https://codepen.io/yatharthaa/pen/XWyEYdz

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!

How to Center a Div with CSS – 7 Different Ways

Comments (1)

More from this blog

What Does a Designer Actually Do When the Software Starts Deciding?

Mastering useRef in React: A Practical Guide

Why Google Translate Crashes Your React App (and How to Fix It)

Seamless MySQL Upgrade: Achieving Zero Downtime with AWS Blue/Green Deployments

UX/UI Trends: That Will Change The Shape of Digital Experience

Using Table

Using position: relative, absolute, and offset values

Using Flexbox and justify-content, align-items

Using Flexbox and justify-content, align-self

Using Flexbox and Margin: auto

Using CSS Grid and place-items

Using CSS Grid and place-self

Conclusion

Command Palette

Comments (1)

More from this blog

Using Table

Using position: relative, absolute, and offset values

Using Flexbox and justify-content, align-items

Using Flexbox and justify-content, align-self

Using Flexbox and Margin: auto

Using CSS Grid and place-items

Using CSS Grid and place-self

Conclusion