html - Vertical alignment of one div within another not working -

html - Vertical alignment of one div within another not working -

this cutting downwards version of code: http://jsfiddle.net/f6gcz/

im trying vertically center "learn more" box using code:

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

what cause box not centered vertically? when apply width it doesnt work. help appreciated. cross browser solutions (ie8+) preferred!

if have utilize absolute positioning, add together "learn more" box css:

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

where margin-left 1/2 of container width.

update

if don't have utilize absolute, give div width , set margin to:

margin:0 auto;

if desired, width can percentage instead of px value.

updated fiddle both results.

update two

if want align larn more box without specifying absolute, set within footer container positioned @ bottom, utilize margin:0 auto on it. this: fiddle 2

html css