Почему внутренний div с margin: auto не выравнивается по вертикали?

В родительского div'a с классом контейнер известна ширина и высота, но дочерний div с классом контент не хочет выравниваться вертикально с помощью margin: auto. В чем причина? код


Ответы (1 шт):

Автор решения: Qwerty Q

Можно так

.container {
    line-height: 600px;
    width: 600px;
    height: 600px;
    text-align: center;
    background-color: gainsboro;
}

.content {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5rem;
    width: 200px;
    height: 200px;
    border: 2px solid;
}

А можно вот так

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
    background-color: gainsboro;
}

.content {
    width: 200px;
    height: 200px;
    border: 2px solid;
}
→ Ссылка