Why does auto attribute for margin not work vertically while it works horizontally?

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 de

Answer 1

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;
}