Html 将一个div垂直居中于另一个div内

我正在尝试

垂直对齐：中间
另一个div中的一个div，但由于某些原因，它不能正常工作。我做错了什么


#包装器{
边框：1px纯红；
宽度：500px；
高度：500px；
}
#挡块{
边框：1px纯蓝色；
宽度：500px；
高度：250px；
垂直对齐：中间对齐；
}

我是布洛克
我通常是这样做的


#包装器{
边框：1px纯红；
宽度：500px；
高度：500px；
位置：相对位置；
}
#挡块{
边框：1px纯蓝色；
宽度：500px；
高度：250px；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}

您可以执行以下操作：

#block {
  border:         1px solid blue;
  margin:         25% 0;
  width:          500px;
  height:         250px;
  vertical-align: middle;
}

但那不是你想要的

或者像这样：

#wrapper {
  border:         1px solid red;
  width:          500px;
  height:         500px;
  display:        table-cell;
  vertical-align: middle;
}

#block {
  border:  1px solid blue;
  display: inline-block;
  width:   500px;
  height:  250px;
}

vertical align
属性仅适用于内联级别和表格单元格元素（）。在代码中，您使用的是块级元素

尝试此flexbox替代方案：


#包装器{
边框：1px纯红；
宽度：500px；
高度：500px；
显示：flex；/*建立flex容器*/
对齐项目：居中；/*垂直居中弹性项目*/
}
#挡块{
边框：1px纯蓝色；
宽度：500px；
高度：250px；
/*垂直对齐：中间对齐*/
}

我是布洛克
您可以这样做：

#wrapper {
  border: 1px solid red;
  width: 500px;
  height: 500px;
}
#block {
  border: 1px solid blue;
  width: 500px;
  height: 250px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这里有一个实时视图：
如果你知道内部div的高度，那么你可以在包装上使用相对位置，在内部div中使用绝对位置，并留有一些边距。所以css可以是这样的

#wrapper {
 border: 1px solid red;
 width: 500px;
 height: 500px;
 position: relative;
 }
#block {
 border: 1px solid blue;
 width: 500px;
 height: 250px;
 vertical-align: middle;
 position: absolute;
 margin-top: 50%;
 top: -125px;
 }