The example below will vertically as well as horizontally center the text inside the div. Lastly, set the value center to both the justify-content and align-items properties. Set background to red and the display property to flex. Next, select the box class and set its height to 100%. By doing this, the browser will line up the top and left edge of the div with the center of the page vertically and horizontally. Then, you need to set the left and top properties to 50. While centering a div vertically and horizontally on a page, you should set the position of the div to absolute. Select the body and html tags in CSS and set the height to 100%. Centering a Div Vertically and Horizontally. Similarly, the align-items property will vertically position the elements inside the flexbox.įor example, create a div with the class box and create another div inside it. It takes various options like flex-start, flex-end, center, etc. The justify-content property will horizontally align the elements in the flexbox. 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.
CENTERING TEXT VERTICALLY IN A DIV HOW TO
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.