Html 垂直对齐<；部门>；在<；部门>；

我正在尝试创建一个以背景图像为中心的div中的白色框，水平和垂直居中

在“中心”类中，我成功地将其水平居中，如下图所示，但没有垂直居中。我尝试将“过滤框”类的“底部”设置为所需的值，并尝试使用线条高度和垂直对齐，所有这些都不会使过滤框移动

.image容器{
背景：url（'stube.jpg'）无重复；
高度：40公分；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
线高：20em；
}
.过滤箱{
背景色：白色；
宽度：500px；
高度：100px；
垂直对齐：中间对齐；
}
.中心{
保证金：自动；
宽度：50%；
}

html

您可以在父元素中使用

显示：flex

和

对齐项目：居中

.image容器{
显示器：flex；
对齐项目：居中；
背景：黄色无重复固定；
高度：40公分；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
线高：20em；
}
.过滤箱{
背景色：白色；
宽度：500px；
高度：100px；
垂直对齐：中间对齐；
}
.中心{
保证金：自动；
宽度：50%；
}

---

您还可以使用flexbox将外部容器的显示设置为flex，从而快速将div居中。这也就不需要

中心

类

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('stubbe.jpg') no-repeat fixed;
  height: 40em;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  line-height: 20em;
}

.filter-box {
  background-color: white;
  width: 500px;
  height: 100px;
}