<div class="container">
<div class="element"></div>
</div>
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -1ch;
}
.element{
display: inline-block;
vertical-align: middle;
margin: auto;
width: 100%; height: 50vh;
background:tomato
}
/* just aesthetics */
.container{
width:90vw;
height: 90vh;
border: 3px solid steelblue;
margin: auto;
}
body{
height: 100vh;
display:flex;
background: azure;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.