Как центрировать контейнер по центру экрана ⇐ CSS

[Anonymous]

Я пытаюсь центрировать текст по центру экрана. По какой-то причине это не работает. Я работаю над следующим index.html. Что я делаю не так?






Document

.outer-container {
display: flex;
flex-direction: column;
}

.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}

span {
padding: .5rem;
}





HEADING
Some text here.





Я думал, что гибкий макет заполняет все доступное пространство. Поскольку мое гибкое направление — «столбец», я ожидал, что внешний контейнер заполнит всю высоту моего экрана, но, видимо, это не так.
Обновить
Я обновил свой код. Теперь я поместил свой внешний контейнер и внутренний контейнер внутри родительского контейнера, чтобы продемонстрировать проблему, с которой я столкнулся при установке высоты внешнего контейнера на 100vh: Как вы можете видеть, проблема в том, что высота 100vh для моего внешнего контейнера теперь слишком велика - правильная высота будет 100vh минус высота заголовка.







Document

.header {
display: flex;
background-color: black;
padding: 2rem;
}

.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}

.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}

span {
padding: .5rem;
}




Header


HEADING
Some text here.







Подробнее здесь: https://stackoverflow.com/questions/752 ... f-a-screen