​Как центрировать в CSS через Flexbox, Grid, Position и Margin

Сегодня мы покажем, как можно центрировать и выравнивать содержимое с помощью CSS. Ещё мы рассмотрим разные техники выравнивания.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Вакансии на tproger.ru

Что такое главная и поперечная оси в CSS

Прежде всего, давайте разберемся, что такое:

Линия, проходящая по экрану слева направо — это и есть главная ось. Вы также можете называть её осью Х или горизонтальной линией.

Линия, которая проходит сверху вниз — это поперечная ось. Также её можно назвать осью Y или вертикальной линией. 

Настройка проекта

Чтобы поэкспериментировать со всеми свойствами и значениями, напишем следующий код в редакторе.

HTML

Запишите этот код внутри тега body:

CSS

Очистите стили браузера по умолчанию, чтобы мы получали точные результаты.

*{ margin: 0px; padding: 0px; box-sizing: border-box; }

Выберите класс .container и установите его значение 100vh. В противном случае мы не сможем увидеть наш результат на вертикальной оси:

.container{ height: 100vh; }

Стилизуйте класс .box-1 следующим образом:

.box-1{ width: 120px; height: 120px; background-color: skyblue; border: 2px solid black; }

Все готово, теперь начнем кодить!

Как использовать Flexbox для центрирования чего-либо

Мы можем использовать Flexbox для выравнивания div по осям X и Y.

Для этого нам нужно записать свойство display: flex; внутри класса .container:

.container{ display: flex; height: 100vh; }

Мы поэкспериментируем с этими двумя свойствами:

• justify-content;
• align-items.

Как отцентрировать что-либо по горизонтали с помощью Flexbox

Мы используем свойство justify-content, используя следующие значения.

Напишите следующий код.

.container{ display: flex; height: 100vh; /* Change values to experiment*/ justify-content: center; }

Результат будет выглядеть следующим образом.

Как выровнять что-либо по вертикали с помощью Flexbox

Мы используем свойство align-items, используя следующие значения.

Чтобы поэкспериментировать со значениями, напишите следующий код.

.container{ height: 100vh; display: flex; /* Change values to experiment*/ align-items: center; }

Результат выглядит так:

Как центрировать div по горизонтали и вертикали с помощью Flexbox

Мы объединим свойства justify-content и align-items, чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код.

.container{ height: 100vh; display: flex; /* Change values to experiment*/ align-items: center; justify-content: center; }

Результат выглядит следующим образом.

Вы можете ознакомиться с этой шпаргалкой, чтобы узнать больше о различных свойствах Flexbox.

Как использовать CSS Grid для центрирования чего-либо

Используем grid для выравнивания содержимого div по осям X и Y.

Для этого нужно записать свойство display: grid; внутри класса .container:

.container{ display: grid; height: 100vh; }

Поэкспериментируем с этими двумя свойствами:

В качестве альтернативы можно использовать эти свойства:

Как выровнять что-либо по горизонтали с помощью CSS Grid

Используем свойство justify-content.

Напишите такой код:

.container{ height: 100vh; display: grid; /* Change values to experiment*/ justify-content: center; }

Вот результат:

Как выровнять что-либо по вертикали с помощью CSS Grid

Мы используем свойство align-content, используя следующие значения.

Напишите этот код:

.container{ height: 100vh; display: grid; /* Change values to experiment*/ align-content: center; }

Вот, каким будет результат:

Как выровнять div по горизонтали и вертикали с помощью CSS Grid

Объединим свойства justify-content и align-content, чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код:

.container{ height: 100vh; display: grid; /* Change values to experiment*/ align-content: center; justify-content: center; }

Результат, который должен получиться:

Альтернативный способ

Вы можете использовать свойства justify-items и align-items и получить те же результаты:

.container{ height: 100vh; display: grid; /* Change values to experiment*/ align-items: center; justify-items: center; }

Свойство place-content в CSS Grid

Это сокращение двух свойств CSS Grid:

.container{ height: 100vh; display: grid; place-content: center; }

Получаем тот же результат:

Как использовать свойство CSS Position для центрирования чего-либо

Это комбинация этих свойств:

Напишите следующий код:

.container{ height: 100vh; position: relative; }

Вместе с этим кодом в CSS:

.box-1{ position: absolute; width: 120px; height: 120px; background-color: skyblue; border: 2px solid black; }

Что такое центральная точка div

По умолчанию это — центральная точка div.

Вот почему мы видим такое странное поведение блока при попытке выровнять его.

Обратите внимание, что на изображении выше блок находится не по центру. 

Написав эту строку:

transform: translate(-50%,-50%);

Мы решим проблему и получим следующий результат.

Что такое свойство Translate в CSS

Translate — это сокращение 3 свойств:

Как выровнять div по горизонтали с помощью свойства CSS Position

Используем свойство left внутри класса .box-1. 

.box-1{ /* other codes are here*/ left: 50%; transform: translate(-50%); }

Вот результат:

Как выровнять div по вертикали с помощью свойства CSS Position

Используем свойство top внутри класса .box-1.

.box-1{ /* Other codes are here*/ top: 50%; transform: translate(0,-50%); }

Результат:

Как центрировать div по горизонтали и вертикали с помощью свойства CSS position

Чтобы достичь этого результата, мы объединим вместе свойства:

.box-1{ /*Other codes are here */ top: 50%; left: 50%; transform: translate(-50%,-50%); }

Результат:

Как использовать свойство margin для центрирования чего-либо

Свойство margin является сокращением 4 свойств:

Напишите этот код:

.container{ height: 100vh; display: flex; } .box-1{ width: 120px; height: 120px; background-color: skyblue; border: 2px solid black; }

Как выровнять div по горизонтали с помощью свойства CSS margin

Используем свойство margin внутри класса .box-1. Напишите этот код:

.box-1{ //Other codes are here margin: 0px auto; }

Вот, как будет выглядеть результат:

Как выровнять div по вертикали с помощью свойства CSS margin

Снова используем margin внутри класса .box-1. Напишите следующий код:

.box-1{ //Other codes are here margin: auto 0px; }

Результат:

Как выровнять div по горизонтали и вертикали с помощью свойства CSS margin

И ещё разок используем margin внутри класса .box-1. Напишите такой код:

.box-1{ //Other codes are here margin: auto auto; }

Результат будет выглядеть так:

Заключение

Теперь вы можете уверенно выравнивать или центрировать содержимое, используя любой из этих четырех методов в CSS.

Возьмите вашу медаль за то, что дочитали статью до конца!

Следите за новыми постами по любимым темам

Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.