CSS Vertical Centering of Text and Div - A Complete Guide

Desingers often face problems while aligning the content at the center (vertically or horizontally) of other elements. The most common issues in terms of alignment are

  • CSS align text at middle (horizontally and vertically).

  • CSS align div at center within other div element

We'll discuss all of the methods to acquire the respective alignment.

1. CSS horizontal and vertical align text

text-align property for horizontal alignment

We know that it is very easy to align the content at the center of other element. text-align:center property aligns the content horizontally at the center.

Example

<style>
div{
 text-align:center;
}
</style>
Try </>

The text present within the <div> element is aligned at the center.


line-height property for vertical alignment

line-height property can align the text at the middle of a block (vertically). The value of line-height property should be equal to the height of container.

Example

<style>
div{
 line-height:200px;
}
</style>
Try </>

line-height property works well for inline-element (<span>) and not for block level elements (<p>).


In the above example, the height of <div> element is equal to 200px and the inner text is aligned at the middle of div element. Some developers often recommend to specify vertical-align property with the line-height property.


Desingers often confuse vertical-align:middle property with the vertical-align:center. But vertical-align:center property does not exist.

line-height property is suitable for only one line text. If the text wraps to the next line, it is not suitable. There are some other methods that you can use.

2. CSS vertical and horizontal align div

We use the following methods to align the div at the center of other div (horizontally and vertically).

margin and absolute properties

In this case, you don't have to calculate the value to align the box at the center. And the child box is automatically aligned at the center (horizontally and vertically) of outer box.

Example

<style>
div{
width:200px;
height:200px;
position:absolute;
border:1px solid black;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin:auto;
}
</style>
Try </>

margin:auto aligns the div at the center (horizontally).

div neither moves up nor moves down because of position property resulting in vertically centering of div.

But the combination of position and margin properties aligns the box at the center (horizontally and vertically).


This method solves the problem for both horizontal and vertical alignment of block level element within other block level elements.

absolute and relative properties

We can align a block at the center of another block level element (both vertically and horizontally). We use the relative and absolute positioning of the parent and child elements respectively.

Example

<style>
div.outer{
 width:500px;
 height:500px;
 position:relative; 
}
div.inner{
 width:50%;
 height:30%;
 position:absolute;
 left:25%;
 top:35%; 
}
</style>
Try </>

In this case, we have to calculate the values of left and top properties.

top = (100%-30%)/2

left = (100%-50%)/2

Now the inner element is at the center of outer element. The inner box will always be at center whatever the size of outer box.

position:relative positions the element relative to its original position.

position:absolute positions the element relative to its container.

But you may take the width and height of outer box in percentage to make it more flexible.

margin property

The margin also plays an important role in aligning the content within other block level element.

Example

<style>
div.outer{
width:500px;
height:500px;
border:1px solid black;
}
 
div.inner{
width:200px;
height:200px;
border:1px solid red;
margin:150px 0px 0px 150px;
}
</style>
Try </>

In this case, we calculate the margin as we calculated in the above example.

margin-top = (500-200)/2

margin-left = (500-200)/2

We obtain the value of margin-top by subtracting the inner height from the outer height and dividing it by 2.


Conclusion:

Which method to choose? It all depends upon your project. If you want to align content at the center (horizontally), use text-align:center;. If you want to vertically align a single text of line, use line-height property. Use absolute and margin properties to align the content at the center (vertically and horizontally).




Was this article helpful?

 

Email:

Message:

Get the newsletter