How to Vertically Center ≪Div≫ Inside the Parent Element With Css

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

Tested in:

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities:
Compare all the methods on one pages

How to vertically center content of child divs inside parent div in a fluid layout

I updated your fiddle: http://jsfiddle.net/yX3p9/7/

I used display: table-cell; in order to use vertical-align: middle;

How to vertically center div inside the parent element with CSS?

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;
}

Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.

Recommended Reading

• Browser support
• A Guide to Flexbox
• Using CSS Flexible Boxes

How to vertically align the child divs in a parent div?

Try this

 #lists {
                  display: inline-block;
                  text-align: center;
                  padding: 5px;
                  margin: 5px;
                  border: 1px solid blue;
                  height: 190px;
             vertical-align: middle;
                }

Vertically align a child div element with parent div having dynamic height

You can use display: flex.

.parent {  display: flex;  justify-content: center;  align-items: center;  height: 100px;  width: 100px;  margin: 1em;  background-color: tomato;}
.child {  width: 10px;  height: 10px;  background-color: yellow;}
You can use `displa: flex`.
The following doesn't rely on parent's height.

<div class="parent">  <div class="child">  </div></div>

.home_column{ 
    width: 30%;
    margin: auto;
    max-height:240px;
    text-align:center;
     background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
 -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;


}

.chair {
    width: 50px;
    height: 50px;
    margin: 5px auto;         <---  Use auto to center element left/right
    background: deepskyblue;
    line-height: 50px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.parent {
    display: block;
    width: 100%;
    height: 300px;
    position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}