How to center a div element vertically using CSS

In web development, aligning elements on a page comes as a common challenge. And one of the most searched queries on the internet related to it is "How to center an element or a div vertically in a web page".

In this article, we will see four different ways to center an element vertically. These four ways are by using:

1. Flexbox Method
2. CSS Grid Method
3. CSS Table Method, and
4. CSS transform method

Let's see each method with examples.

Using Flexbox Method

The flexbox method is one of the easiest methods to center a div vertically. We can align an element vertically and horizontally using one property of flexbox.

To center a div or element vertically, we have added the following CSS code to its parent element.

.parent{
    display: flex;
    align-items: center;
}


.child{
    height: 100px;
    width: 100px;
    background-color: green;
}

The above code will center the child div vertically within the parent element. The align-items property aligns elements along the cross-axis (x-axis).

Using CSS Grid Method

Another method to center a div in a webpage is to use the CSS grid method. It allows us to create a grid layout on which we can align an element in various ways.

So to center an element vertically, we can use the following CSS property on the parent div.

.parent{
    display: grid;
    place-items:center;
}

This code on the parent div will center any child element within it. The place-items property centers the child both horizontally and vertically.

Using the Table Method

The CSS table method is another method to center a div on a webpage. The main idea is to arrange the elements in a table-like structure.

To use it, we have to use the following code.

.parent{ 
    display: table-cell;
    vertical-align: middle;
}

.child{
     vertical-align: middle;
}

The vertical-align property is used to align an element vertically within its containing block. It is applied to inline and table-cell elements.

The table-cell value of the display property makes the element behave like a cell in a table including the ability to be aligned vertically or horizontally.

Here is a complete code to center an element vertically using the table method:

 <div class="parent">
   <div class="child">
     Hello
   </div>
 </div>

Now adding the css property.

.parent {
      height: 400px;
      width: 500px;
      vertical-align: middle;
      display: table-cell;
      background: green;
    }

    .child {
      vertical-align: middle;
      border: 1px solid #000000;
      height: 40px;
      background: yellow;
    }

Result:

Using CSS transform Method

This is an advance way to center an element vertically or horizontally on a web page. It allows us to rotate, move, or scale elements on a webpage.

We can use this method to align a div vertically by adding the following code to the child element.

.parent{
    position: relative;
}

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The above code will center the element within the parent div, vertically and horizontally.

The top: 50% and left: 50% properties will position the child div to the center of the parent element. And the transform: translate(-50%, -50%), will move the element up and to the left by 50% of its own height and width, respectively.

Conclusion:

Here, we have discussed the different ways to center an element vertically on a webpage. Some are easy to apply like flexbox and grid methods. Whereas some are a bit advance or complicated, for example using table-cell and transform properties.

As a developer, you can use any of the methods that best fit your needs.