使用CSS在頁面上垂直居中元素？

Question

我需要在頁面上垂直居中未知高度的元素。

我可以垂直居中相對於這個含有格：

.one { 
    background: grey; 
    width: 50%; 
    position: relative; 
    top: 50%; 
transform: translateY(-50%); 
    margin: auto; 
} 
.cont { 
    background: blue; 
    height: 300px; 
} 

http://codepen.io/anon/pen/lfrJx

但是我不能讓它在頁面上垂直居中：

.one { 
    background: grey; 
    width: 50%; 
    position: relative; 
    top: 50%; 
transform: translateY(-50%); 
    margin: auto; 
} 
.cont { 
    background: blue; 
    height: 100%; 
} 

http://codepen.io/anon/pen/gqLcB

Answer 1

http://codepen.io/anon/pen/mFGeH

.cont { 
    position:absolute; 
    background: blue; 
    height: 100%; 
    width:100%; 
} 

Answer 2

把這個CSS :)

.one { 
 
    background: grey; 
 
    width: 50%; 
 
    position: relative; 
 
    margin-top:auto; 
 
    margin-bottom:auto; 
 
    vertical-align:middle; 
 
} 
 
.cont { 
 
display: table-cell; 
 
    background: blue; 
 
    width:100%; 
 
}