I am trying to nest a <div> within another <div> and center it within the parent. Here is my current approach:
<div id="redthing">
<div id="whitebox" >
</div>
</div>
The CSS code I am using is as follows:
#redthing {
margin-top: 2px;
background-color: #f00d28;
height: 250px;
}
#whitebox {
margin: 0 auto;
margin-top: 10px;
padding-top: 20px;
height: 10px;
width: 400px;
background-color: white;
border:5px solid #000;
}
As you can see, I am facing difficulty in centering the whitebox vertically within the redbox. The current setup leaves equal space between the top and bottom of the red box and the white box. Can anyone provide guidance on how to achieve vertical centering? Thank you.