Vertically middle align the DIV tag using CSS

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Vertically middle align the DIV tag using CSS

Source code and Methods to Middle align the text in DIV tag in HTML

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

Related posts