An Easy Way to Center a DIV both Vertically and Horizontally
Tags: html, css, frontend
Published: 2023-02-08 20:04:15

---
title: An Easy Way to Center a DIV both Vertically and Horizontally
published: true
date: 2020-11-13 23:52:43 UTC
tags: #html, #css, #frontend
canonical_url: https://maryojo.hashnode.dev/an-easy-way-to-center-a-div-both-vertically-and-horizontally
---

This is a common problem that beginners face which seems to have no particular solution because there are many ways to achieve this. For almost every project I did, when starting out, I was searching the internet whenever I wanted to centre a div both horizontally and/or vertically. I came across one really **easy way** to achieve this while I was doing an online course, and I have since decided to stick to this method(using the flexbox) except in distinct cases.

In this article, I would describe how a div which is on a page, inside another element or div can be:

- Centred vertically 
- Centered horizontally 
- Centred both vertically and horizontally

### Centering a div vertically

To center a div vertically, you do this:

```
<!-- I want to center the div with a class of shape-->
<html>
  <head>
        <style>
           .shape{
                 width: 100px;
                 height: 100px;
                 background: green;
            }
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>
</html>

```

The code above gives this as an output:

![testtt.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1605305424660/1eYr31-A1.png)From the image above, we see that the 'shape' div is not centered vertically, to achieve this:

- Add 'display: flex' and
- Add 'align-items: center' to the parent element which is the '.container' , as shown below:

```
  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  align-items: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

```

This is the output:

![testtttt.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1605305208669/sLvuDw9jN.png)

The 'shape' div has been centered vertically. Next, we horizontally center the div.

### Centering the div horizontally

We follow the same steps above to horizontally center the div except that we now **use 'justify-content: center' instead of 'align-items: center'**

- Adding the 'display: flex' and
- Adding 'justify-content: center' to the CSS properties of the parent element which is '.container' here.

This is shown in the code below:

```
  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  justify-content: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

```

The output below shows a div which has been centered horizontally:

![teststst.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1605306899560/YwpdD8vq9.png)

Next, we center the div both horizontally and vertically

### Centering the div both horizontally and vertically

This is a combination of the two initial steps, we achieve this by:

- Adding the 'display: flex'
- Adding the 'align-items: center'
- Adding the 'justify-content: center'

This is shown below:

```
  <head>
        <style>
           .shape{
              background: green;
            }
           .container{
                  display: flex;
                  align-items: center;
                  justify-content: center;
             } 
         /* The properties are added to the 'container' parent element */
        </style>
  </head>
  <body class="container"><!--This is the parent element-->
            <div class="shape"></div><!-- This is the div to center-->
  </body>

```

The output is shown here:

![divv.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1605307502928/YkSmX8ELa.png)

We see that the div is now centered both vertically and horizontally.

**Thanks for reading this! I hope it was really helpful, I would love to hear your comments.**