html - 在所有屏幕分辨率下将 div 置于背景图像中间

Question

我正在使用这段代码来显示占据浏览器整个垂直高度的背景图像。

<div id="outer"></div>

CSS

#outer {
  background-image: url(https://www.mydomain./image.jpg);
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}

我希望在内部放置一个 div，对于所有屏幕分辨率，它在图像中间垂直和水平居中。

到目前为止，我所做的一切都没有成功。这需要大多数浏览器支持。

Answer 1

设置内部div的height和width，然后使用margin: auto水平居中, 和 padding: calc(50vh - 10px) 0 垂直居中。 10px 必须是内部 div 高度的一半。试试这个:

#outer {
  background-image: url('http://placehold.it/100x100');
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
#inner {
  color: red;
  width: 100px;
  height: 20px;
  margin: auto;
  text-align: center;
  padding: calc(50vh - 10px) 0;
}

<div id="outer">
  <div id="inner">test</div>
</div>