Question

我正在尝试在一个具有背景图像的div中创建一个水平和垂直居中的白框。

我设法将其水平居中，如下面在“中心”类中所见，而不是垂直。我试图将“ filter-box”类的“ bottom”设置为所需的值，并尝试使用行高和垂直对齐-所有这些都不会使盒子移动。

html
<div class="image-container">
  <div class="filter-box center">
  </div>
</div>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />

Answer 1

您可以在父元素中使用display:flex和align-items: center。

.image-container {
  display: flex;
  align-items: center;

  background: yellow 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;
  vertical-align: middle;
}
.center {
  margin: auto;
  width: 50%;
}

<div class="image-container">
  <div class="filter-box center">
  </div>
</div>

如果需要，您也可以使用flex将其水平居中，只需添加justify-content: center;

Answer 2

您还可以使用flexbox通过将外部容器的显示设置为flex来快速使div居中。这也将消除对center类的需求。

.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;
}

在<div>中垂直对齐<div>

2 个答案: