<div class="container">
<div class="element"></div>
</div>
.container{
display: flex;
flex-direction: column;
}
.container::before,
.container::after {
content: "";
flex: 1;
}
/* just aesthetics */
.container{
width:90vw;
height: 90vh;
border: 3px solid steelblue;
margin: auto;
}
.element{
background: tomato;
width: 50vw; height: 50vh;
margin: 0 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.