HTML
<div class='container'>
<div class='boxContainer'>
The text inside this box should be centered vertically
</div>
</div>
CSS
.container
{
position: relative;
height: 300px;
width: 400px;
background: lightblue;
border: 2px solid black;
}
.boxContainer
{
position: relative;
height: 200px;
width: 300px;
padding-top: 50%;
background: orange;
}
Example link:
In the demonstration provided, .boxContainer has a padding-top of 50%. This padding should be based on the height of the parent element (.container), resulting in 150px. However, it actually renders as 200px. What could be causing this discrepancy?