3 Ways to Center content using HTML & CSS

The most common web developer question online is how to center a div horizontally and vertically. Although the question has been answered on multiple occasions, I decided to put together different techniques in a single place.

Base Template

I've created a base template that contains a title, an image, and an anchor tag for routing.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css"/>
  <title>Document</title>
</head>
<body>
  <div class="main-container">
    <div class="content">
      <h2 class="title">Page Not Found</h2>
      <img src="https://imgc.allpostersimages.com/img/posters/our-princess-is-in-another-castle_u-L-PXJ9PG0.jpg" alt="" class="cover-img">
      <a href="./" class="page-router">Go Home</a>
    </div>
  </div>
</body>
</html>

Initial Preview

Base CSS

With this base CSS in place, you should immediately see some positive changes.



.content {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

/* Places anchor tag in the next line*/
.page-router {
  display: block;
}

Why is content centered horizontally?

This is achieved thanks to the text-align: center;. Since the .content container class does not have a width property set, it takes the full width of the parent container (.main-container)

The text-align: center; places the content in the middle and that's why you see items centered horizontally.

Now let's center things vertically as well.

#1 Flexbox

To apply flexbox centering, set a display: flex on the parent container (.main-container), along with align-items and justify-content to the value center:



 .main-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

The parent container also must take the full page height, which is set using height: 100vh;.

Flexbox centers items as expected ✔️

#2 Grid

An alternative to Flexbox is a Grid. The implementation is similar. Set the display property to display: grid as well as place-items: center:



.main-container {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

Once again the content is centered as expected ✔️

#3 Position Absolute

Probably the oldest trick in the book. Using this technique you can position an element anywhere you like on the screen using percentages.

To make it work, set the relative position on the parent element:



.main-container {
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

And then set position: absolute on the child element.



.content {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  position: absolute;
}

The way it works is that an absolute element will be placed on the UI relative to its parent element. If the parent element is not set, then the absolute element will be positioned based on the top page element.

With absolute positioning, you also need to take the size of the content into account. For example, to center the .content I could not set the percentages top and left to 50% as one would expect,

but rather accommodate it for the size of the content being centered.



.content {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  position: absolute;
  top: 25%;
  left: 37%;
}

It does the job, but I would not recommend this approach 👎

Horizontal centering

Lastly, let's touch on the horizontal centering.

Applying text-align: center; on the child element - when the child element does not have a width set, in which case it takes the full width of the parent element
Applying margin: 0 auto; on the child element - when the child element does have a width specified

That's all from me today 👋

Follow me on Medium, Twitter, and The Practical Dev to stay up to date with my content.