I want to center 3 divs horizontally and vertically in a div. I can't use flexbox, because later more divs and flexbox is shinks these new divs, but I dont know how to center vertically
<div class="hero">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.hero {
width: 100vw;
height: 100vh;
text-align: center;
}
.box {
width: 250px;
height: 350px;
background: red;
margin: 50px;
display: inline-block;
}