Есть верстка с хедером и мейном. Высота мейна заранее неизвестна, и вычисляется браузером на лету. Внутри мейна есть див. У дива заданы четкие размеры. Требуется выровнять див по вертикали, чтобы он был по середине мейна. Как это сделать?
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 88px;
width: 100%;
background-color: rgb(138, 138, 151);
}
main {
position: relative;
display: flex;
justify-content: center;
}
.content {
width: 1000px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-color: rgb(221, 193, 67);
}
<div class="container">
<header></header>
<main>
<div class="content">контент для выравнивания</div>
</main>
</div>
Результат, который я хочу получить: