DEV Community

Mary Ojo
Mary Ojo

Posted on • Originally published at maryojo.hashnode.dev on

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>

Enter fullscreen mode Exit fullscreen mode

The code above gives this as an output:

testtt.PNGFrom 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>

Enter fullscreen mode Exit fullscreen mode

This is the output:

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

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

The output is shown here:

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

Top comments (0)