Свойства Flexbox, применяемые к тексту вместо гибкого контейнера ⇐ CSS

[Anonymous]

Я неопытный программист, создающий веб-сайт преобразователя температуры с использованием HTML и CSS. Я использую контейнер для отображения текста «Конвертер температуры», который я хочу отображать вверху и в центре веб-страницы.
Я столкнулся с проблемой на ранних этапах разработки, пока осваивал флексбоксы. При использовании justify-content и align-self внутри идентификатора контейнера эти свойства применяются к тексту внутри контейнера, а не к самому контейнеру, перемещая текст в верхнюю часть и центр контейнера.
CSS-код:

Код: Выделить всё

div {
display: flex;
}

#title {
align-self: flex-start;
justify-content: center;
background-color: lightgray;
font: arial;
text-align: center;
height: 100px;
max-width: 400px;
}

HTML-код:

Код: Выделить всё

placeholder




Temperature Converter

Я попробовал несколько различных комбинаций гибких свойств, включая justify-self и align-items, а также переместил их в раздел div кода CSS, ни одно из которых не является любая помощь. Подобные вопросы, заданные здесь, которые, как я обнаружил, не применимы к моей проблеме.
Я думаю, что из-за своей неопытности я упустил что-то очевидное, но помощь с перемещением контейнера вместо текста будет оценена по достоинству.

Подробнее здесь: https://stackoverflow.com/questions/781 ... -container