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

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/

#box{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:57vmax;
    height:57vmax;
    background: red;
}  

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