使用CSS垂直居中页面上的元素？

Question

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

我可以相对于包含div的垂直居中：

.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

把这个css：）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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