Vertical align div inside another div without flex
Here you go.
Code Snippet:
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent ">
<div class="hello">
hello
</div>
</div>
vertical-align works only for display: table-cell, in some browsers you should wrap parent with display: table
.hello {
height: 100px;
width: 100px;
}
.parent {
height: 400px;
width: 400px;
display: table-cell;
vertical-align: middle;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>