Vertically center an element on the page with CSS? -

I have to center an element of an unknown height vertically on the page.

I can set it relative to the one containing division:

  .one {background: gray; Width: 50%; Status: Relative; Top: 50%; Conversions: Translator Y (-50%); Margins: Auto; } .cont {background: blue; Height: 300px; }  

Although I can not find it in vertical center on the page:

  .one {background: gray; Width: 50%; Status: Relative; Top: 50%; Conversions: Translator Y (-50%); Margins: Auto; } .cont {background: blue; Height: 100%; }  

keep this CSS :)

  .one {background: gray; Width: 50%; Status: Relative; Margin Top: Auto; Margin-bottom: auto; Vertical-align: medium; } .cont {display: table-cell; Background: blue; Width: 100%; }