Why Isn't My Margin:10px Auto; Working?

For some reason my parent div ( #box_one ) is being centered in my page perfectly fine by using ( #box_one{ margin: 10px auto 10px auto; } ), but when I try the same technique for

Solution 1:

you need to add a explicit width to child div

#box_one {
  border: 1px solid black;
  width: 400px;
  margin: 10px auto;
}
#box_one > div {
  height: 200px;
  border: 1px solid black;
  margin: 10px auto;
  width: 50%
}

<divid="box_one"><div></div></div>

`

Solution 2:

Technically, the child element is being centered, in the sense that its auto horizontal margins are both being zeroed out. The reason for this, is because your child element, unlike #box_one itself, doesn't have a set width.

When the width of a block box (display: block) is not explicitly set, or set to auto, the box will stretch horizontally to fit its containing block, resulting in its auto horizontal margins being zeroed out:

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

Solution 3:

Just add a width to #box_one > div{} and you will be golden.