Question

我正在尝试将div相对于另一个div作为中心，该div将背景图像定位为封面。

HTML：

<div id="back">
  <div id="box">
    <p>test 1</p>
    <p>test 2</p>
    <p>test 3</p>
  </div>
</div>

的CSS：

#back{
   position: absolute;
   top: 0;
   left: 0;
  right: 0;
  bottom: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/White_square_in_purple_background.svg/450px-White_square_in_purple_background.svg.png');
  background-repat: no-repeat;
  background-position: 50%;
  background-size: cover;
}

#box{
  position: absolute;
  top:10%;
  left: 20%;
  bottom: 10%;
  right: 20%;
  background: red;
}

这是一个小提琴：

http://jsfiddle.net/8x7tgrqm/

我正试图将红色div始终置于不同屏幕尺寸的背景白框内。尝试调整窗口大小以查看我的意思。我想知道在CSS甚至JS中是否有办法让盒子始终居中于背景白框。

感谢

Answer 1

以下是使用真棒vmax单元的解决方案：

http://jsfiddle.net/x5m3w40o/2/

{{1}}

您可能需要将57 vmax值调整为58-59，以使其在此特定情况下完全覆盖白色矩形。

CSS - 如何将div相对于定位为封面的背景图像居中

1 个答案: