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

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

我可以使用以下命令将其相对于包含div垂直居中：

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

但是，我无法使其在页面上垂直居中：

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

把这个放进去：）

.one{
背景：灰色；
宽度：50%；
位置：相对位置；
页边顶部：自动；
页边距底部：自动；
垂直对齐：中间对齐；
}
续{
显示：表格单元格；
背景：蓝色；
宽度：100%；
}

检查这个

html，body{height:100%；}

应该这样做。

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