Как сделать выравнивание по длине — центр?

Question

[JohhnyT]

Это оффлайн страница сайта. Не получается выравнивать слой по длине. На телефоне\планшете содержимое не выравнивается по центру относительно длины. Вот скриншот и вот сайт onehub.ru. Красным выделено как должно быть. Если кто знает, скиньте код и стили как исправить.

Comments

[Ankhena]

Вы поставили отступ сверху 22%.
Но отступ в % считается от ширины родителя.

Раз у вас body это флекс, то и задайте ему выравнивание вдоль поперечной оси: align-items: center

Альтернативный вариант: если main так и останется единственным ребенком, то оставить ему margin:auto, не переопределяя верхний отступ на %.

И не забудьте добавить в head

<meta name="viewport" content="width=device-width">

, а то текст будет не прочитать.

Answer 1

[archelon]

html {
    min-height: 100%;
}
body {
    min-height: 100vh;
    display: flex;
}
.main {
    margin: auto;
}

Comments

[JohhnyT]

Заменил стили, с телефона захожу все без изменений почему-то. Кэш очищен был.