CSS - Как центрировать div относительно фонового изображения, расположенного как обложка

Question

Я пытаюсь центрировать 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, чтобы полностью сделать это в этом конкретном случае накройте белый прямоугольник.