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:

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:

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:

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:

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.

An Easy Way to Center a DIV both Vertically and Horizontally

Comments

More from this blog

The Question I Ask Before Building Anything

3 UX mistakes that might be costing you users

Beyond Alt Texts: How AI can Help Solve the "Cognitive Gap" in Modern UX

That’s AI? Intelligence in Everyday Interfaces

Should We Really Build Carousels Without JS?

Centering a div vertically

Centering the div horizontally

Centering the div both horizontally and vertically

Command Palette

Comments

More from this blog

Centering a div vertically

Centering the div horizontally

Centering the div both horizontally and vertically