We can use the display property to define the container as a flexbox.

We can create a flexible container and use the justify-content and align-items properties to vertically center the div in CSS. Use the CSS Flexbox to Vertically Center the div in CSS In this way, the inner div is vertically centered. It will move upwards because of the negative value, which means the div will move 10px upwards. The translateY(-50%) value will move the top edge with 50% of its height upwards. However, the inner div is not centered because it has the height of 20px. 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. 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. Next, select the inner div and set the position property to relative. In CSS, select the outer div and set the height, width and background-color to 180px, 300px and blue. We can vertically center a div using these two properties.įor example, create a div element and wrap it with another div element in HTML. The translateY() function will translate the element only from the Y-axis. The transform property takes a variety of values and translateY() is the one we will use. The property exhibits different behavior according to the position property applied to the elements.įor example, if position is set to relative, the element’s top edge will move downward or upward from its normal position. The top property only sets the vertical position of the positioned elements. We can use the CSS properties transform and top to center the inner div vertically.

This method uses two containers to demonstrate how to center a div vertically.įirst, we can create an outer and inner div where we will center the inner div vertically with respect to the outer div. Use the top and transform Properties in the Inner div to Vertically Center the div Using CSS This article will introduce methods to center a div in CSS vertically. Use the CSS Flexbox to Vertically Center the div in CSS.Use the top and transform Properties in the Inner div to Vertically Center the div Using CSS.

Align text vertically center flex