I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inner div both horizontally and vertically.
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 200px;
height: 200px;
background: red;
}
#child {
width: 50%;
height: 50%;
background: blue;
margin: auto;
}
Result: https://i.sstatic.net/eJ8Ad.png
The outcome did not align with my expectations. Can anyone explain why this might be?