一个div在另一个中的垂直对齐不起作用

Question

This is a cut down version of my code: http://jsfiddle.net/f6GCz/

I'm trying to vertically center the "learn more" box using this code:

   position: absolute;
   margin-left: auto;
   margin-right: auto;

What would cause this box not to be centered vertically? Even when I apply a width to it it doesnt work. Cross browser solutions (IE8+) preferred!

Answer 1

If you have to use absolute positioning, add this to your "learn more" box css:

left:50%;
width:90px;
margin-left:-45px;

Where the margin-left is always 1/2 of the container width.

Update

If you don't have to use absolute, then give the div a width and set the margin to:

margin:0 auto;

If desired, the width can be a percentage instead of a px value.

Updated fiddle with both results.

Update Two

If you want to align your learn more box without specifying it as absolute, put it inside a footer container that is positioned at the bottom, then use margin:0 auto on it. Something like this: Fiddle 2