html - Center a dynamic square div based on height -

i'm trying make div is:

a) square
b) dynamically sized based on height of window
c) centered in window (vertically , horizontally)

and can't seem 3 @ once. i've looked lot around , none of tricks (display:table-cell, :before element, etc.) seem work me. closest i've gotten can seen in these 2 jsfiddles: http://jsfiddle.net/ln78n/ , http://jsfiddle.net/ekarx/, both of seem fine until try resize window.

the weird thing is, though, if run jsfiddle again once it's resized, finds right shape , size, think i've run kind of feedback loop box render fine, won't reflow properly.

any thoughts appreciated, whether it's why happens or how accomplish i'm trying do. thanks!

it easy using vh unit css3 units , values (see fiddle in modern browsers):

.square {     background: #ccc;     height: 60vh;     width: 60vh;     margin: 20vh auto; }