<div class="container">
<div class="item">Vertical Centering with CSS</div>
</div>
.container {
position: relative;
display: table;
height: 80vh;
width: 80vw;
border: 3px solid black;
margin: auto;
padding: 10px;
}
.item {
display: table-cell;
background: teal;
color: #fffed3;
font-size: 3rem;
text-align: center;
vertical-align: middle;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.