по вертикали и горизонтали с помощью css

Выравнивание по вертикали и горизонтали с помощью css

Привет всем! Сегодня — короткий пост о теме, которая звучит как «Выравнивание по вертикали и горизонтали с помощью css». Собственно — проблема достаточно распространенная — есть картинка или текст, которую нужно выставить по центру не только по горизонтали (это-то как раз очень просто), но и по вертикали. Давайте решим эту проблемку 😉

Итак, у нас имеется некий текст (картинка). Для того, что бы выставить наш текст (картинку) строго по центру горизонталь-вертикаль в css-стилях прописываем:
.logo-flex {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

где:
— logo-flex — название слоя, к которому будем применять выравнивание
— height: 100vh — код, который говорит о том, что высота этого слоя — 100% (мы, конечно же, можем использовать другие параметры — это лишь пример
— display: flex — применяем постоянно гибкость 🙂 к работе в браузере
— align-items: center — все выставить по центру вертикали
— justify-content: center — все выставить по центру горизонтали

сохраняем css-файл и подключаем его к нашему html. На всякий случай напомню, как подключать стили к html:

<link rel="stylesheet" href="style.css">

после чего в нашем html-файле добавляем:

<div class="logo-flex">Пример размещения текста по центру</div>

и наслаждаемся достигнутым результатом (пример — доступен по ссылке):

Надеюсь, с выравниванием по вертикали и горизонтали с помощью css мы разобрались 🙂 Спасибо за внимание!
Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.