How to Center a Div Vertically Using CSS

1. Use the top and transform Properties in the Inner div to Vertically Center the div Using CSS
2. Use the CSS Flexbox to Vertically Center the div in CSS

This article will introduce methods to center a div in CSS vertically.

Use the top and transform Properties in the Inner div to Vertically Center the div Using CSS

This method uses two containers to demonstrate how to center a div vertically.

First, we can create an outer and inner div where we will center the inner div vertically with respect to the outer div. We can use the CSS properties transform and top to center the inner div vertically.

The top property only sets the vertical position of the positioned elements. The property exhibits different behavior according to the position property applied to the elements.

For example, if position is set to relative, the element’s top edge will move downward or upward from its normal position. The transform property takes a variety of values and translateY() is the one we will use.

The translateY() function will translate the element only from the Y-axis. We can vertically center a div using these two properties.

For example, create a div element and wrap it with another div element in HTML. In CSS, select the outer div and set the height, width and background-color to 180px, 300px and blue.

Next, select the inner div and set the position property to relative. Then, apply red as the background-color property and give 20px height to the div and use the translateY(-50%) as the value of the transform property.

In the example below, the 50% value of the top property will place the top edge of the inner div at the vertical midsection of the outer div. However, the inner div is not centered because it has the height of 20px.

The translateY(-50%) value will move the top edge with 50% of its height upwards. It will move upwards because of the negative value, which means the div will move 10px upwards. In this way, the inner div is vertically centered.

Example Code:

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

Use the CSS Flexbox to Vertically Center the div in CSS

We can create a flexible container and use the justify-content and align-items properties to vertically center the div in CSS. We can use the display property to define the container as a flexbox.

The justify-content property will horizontally align the elements in the flexbox. It takes various options like flex-start, flex-end, center, etc.

Similarly, the align-items property will vertically position the elements inside the flexbox.

For example, create a div with the class box and create another div inside it. Write some text inside the inner div.

Select the body and html tags in CSS and set the height to 100%. Next, select the box class and set its height to 100%.

Set background to red and the display property to flex. Lastly, set the value center to both the justify-content and align-items properties.

The example below will vertically as well as horizontally center the text inside the div. We can use these two properties only inside a flexible container.

Thus, we can center a div using flexbox.

Example Code:

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}