3 Ways to Center content using HTML & CSS
Tags: html, css
Published: 2024-02-14 23:52:39

---
title: 3 Ways to Center content using HTML & CSS
published: true
description: 
tags: HTML, CSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es4rprbjbtvdjtpxqezy.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-11 20:24 +0000
---

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.

```html
<!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

![Initial Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8ri8lxus5pcpdshp5gh.png)


### Base CSS

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

```css
.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;
}
```

![first css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok7wn0czilwbw0x6vhjv.png)

#### 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.

![explaining text align center](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl82fx0noxl4df8ftmo6.png)

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`:

```css
 .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-centering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4v0cmzkkbebgg4mykvu.png)

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`:

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

![Grid centering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/916jimk5somdmre8ge3e.png)

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:

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

And then set `position: absolute` on the child element.

```css
.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, 

![postion absolute 50-50](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyg0q4h8lc61brkynb86.png)

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

```css
.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%;
}
```

![absolute centering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zrqqavom8zg1r37tvrx.png)

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](https://mirzaleka.medium.com/), [Twitter](https://twitter.com/mirzaleka), and [The Practical Dev](https://dev.to/mirzaleka) to stay up to date with my content.