Vertical align images and content in middle of a div

Center aligning CSS is simple when we need horizontally, but vertical alignment is not simple as horizontal.  We can simply use text-align: center for inline elements and margin-left and margin-right values auto for centering horizontally.  In our table based layout days we used valign attribu
te but for div based layouts vertical-align attribute is there but useless.  It doesnt work as it reads.  Vertical-align is similar to valign, it also applies to table cells only and it works with inline elements.
This vertical-align doesnt work with block level elements like a paragraph inside a div.

A common rule which you can use and get results is as follows, using pseudo selector it can be achieved. Simple CSS rules to vertical align your elements in the middle of a div.

0

CSS Rules:

.imgCont{ text-align:center; height:300px; border:1px solid red;}

.imgCont:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}
.imgCont .fpImage {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
}

There are few methods depending on your requirement.

1

When you want to vertically center a single line of text simply use line-height .  line-height value should be larger than its font-size.

HTML:

<div id="parent">
    <div id="child">Text here</div>
</div>

CSS:

#child {line-height: 200px;}

You can use any value in place of 200px whatever suits your requirement.
Same method can be used for image, with adding another line of  CSS.

HTML:

<div id="parent">
    <img src="image.png" alt="" />
</div>

CSS:

#parent {line-height: 200px;}
#parent img {vertical-align: middle;}

*Line height value should be greater than the height of the image.

2

Vertical-align works with table-cells.  We can display our element as table and table-cells and then use vertical-align to middle the content.
HTML:

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS:

 #parent {display: table;}
#child {display: table-cell;vertical-align: middle;}

Content can be dynamic here, it works with multiple line of content.  If it doesnt works in all browsers just add "display:inline-block;" to the child element.

3

This style is usually used for the popups, which we use to center in the middle of the screen.  Child can be centered both vertically and horizontally. "position" is must for both parent and child.  relative for parent and absolute for child.

HTML:

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS:

#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
   }

You should have noticed value of margin-top is -15% that is half of value of height (30%) and value of margin-left  is -25%  that is half of value of width (50%).

Share Your Solutions