css - 使用 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 :)

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