Div Vertical Alignment middle inside a div

How an element is vertically aligned inside a div?

There are many ways to align any element or text vertically aligned inside a div container. If we have a fixed sized container and certain text length, we can easily align it with the help of padding or positioning property of CSS. But what if the container size is dynamic or the text or element to be put inside div is varying? Then both padding and positioning will be failed.
Please read the text and try to implement if you are in a middle of similar situation.

div vertical align middle

Example 1: This example is using display:table and display:table-cell property of CSS

We will first set display:table on parent element and put display:table-cell on child element and vertical-align:middle.

HTML

CSS

Example 2: Vertical alignment middle using the property font, vertical-align and display.

We will set the height of container, font on parent element and create :after pseudo selector shown in the example below.

HTML

CSS

Example 3: If we have fixed value, you can use the example below.

There is a fixed height and content just write height and padding on same element.

HTML

CSS

Example 4: There is a new CSS3 property display:flex

Flex is a CSS3 property. Use height and display:flex on parent element.

HTML

CSS

Example 5: Div vertical align middle by transform property.

We will use transform property to align div vertically, just set position:relative on parent element and position:absolute on child element and set transform:translateY on child element same as given in the example.

HTML

CSS

June 11, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *