Привет всем! Сегодня — короткий пост о теме, которая звучит как «Выравнивание по вертикали и горизонтали с помощью 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:

/* Error on style.css : Something went wrong: Предоставлен неверный URL. */

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

Пример размещения текста по центру

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

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