Vertically middle align the DIV tag using CSS

In this article, i will emphasize on the way of vertically align the text in DIV tag of HTML.

First note i want to share is that, DIV tag is not for the purpose to contain the texts. It is utilized mainly for the placing controls and components.

Below is two methods which will work on all browsers to vertically align the text in DIV  tag.

Steps for Method 1:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

Steps for Method 2:

  1. Set the line-height of the parent element to the fixed height you want.

Note: method 2 will work only for the single line contents.

Demo – Middle Align the DIV tag in HTML

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.