Why does margin: auto only work horizontally and not vertically? - html

Question

I have seen that while developing websites, vertically centering a container (of fixed height) inside a container of random height always comes as a nightmare for the web developer (at least, me) while when it comes to horizontal centering a container (of fixed width) inside a container of random width, the margin:0px auto; tends to serve an easy way out in the standard model.
When things can be as simple as that why doesn't CSS work out with the margin:auto 0px; when it comes to centering a container of fixed height inside a container of random height? Is there any specific reason to do so?

Answer 1

It's really less of a nightmare than you think, just don't use margins. vertical-align is really what you should rely on for fluid-height vertical centering. I threw together a quick demo to demonstrate my point:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
text-align: center;
}
span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
#any-height {
background: #000;
text-align: left;
width: 200px;
height: 200px;
vertical-align: middle;
display: inline-block;
}
<span></span>
<div id="any-height"></div>
See: http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

The right answer for your question is that margin: auto 0 doesn't work the same way that margin: 0 auto works because width: auto doesn't work the same way height: auto does.
Vertical auto margin works for absolutely positioned elements with a known height.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 150px;
height: 150px;
margin: auto;
}

Answer 3

Use flexbox parent
One of advantages of using margin: auto compared to justify-content: center / align-items: center is ability to scroll child item that is overflowing parent
html, body {
height: 100%;
margin: 0;
}
.parent {
display: flex;
width: 100%;
height: 100%;
}
.inner {
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
<div class="parent">
<div class="inner">
</div>
</div>

Answer 4

CSS
.aligncenter{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
flex-pack: center;
}
HTML
<div class="aligncenter">
---your content appear at the middle of the parent div---
</div>
.aligncenter {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
flex-pack: center;
}
<div class="aligncenter">
---your content appear at the middle of the parent div---
</div>
Note
This CSS class work with almost all browsers