Подскажите, в чём может быть проблема - есть такой код:
<div class='screen'><div class='block'></div></div>
Хочу, чтобы .block
был выравнен по горизонтали внутри .screen
.
Задаю следующие стили:
.screen {
z-index: 1000;
position: fixed;
left: 0px;
top: 50px;
width: 100vw;
height: calc(100vh - (50px + 30px));
background: rgba(0, 0, 0, 0.75);
text-align: center;
}
.block {
position: absolute;
width: calc(100vh - (50px + 30px + 2 * 10px));
max-width: calc(100vw - 2 * 10px);
height: calc(100vh - (50px + 30px + 2 * 10px));
max-height: calc(100vh - (50px + 30px + 2 * 10px));
/*left: calc(50% - (100vh - (50px + 30px + 2 * 10px)) / 2);*/
top: 10px;
}
ожидаю, что .block
будет отцентрирован из-за родительского text-align: center;
, но этого не происходит :(
как быть?
Задать горизонтальные координаты я не могу (как в закомментированном коде), потому что ширина может меняться.