How to vertical-align without using display table/table-cell or position absolute ?
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
border: 1px solid blue;
}<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>You can try using display:flex.
CSS
#parent {
border: 1px solid red;
height: 100vh;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
.child {
border: 1px solid blue;
}<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>