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

[XakeR]

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

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

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

Frontend-разработчик отдела облачной платформы Ренессанс Банк, , можно удалённо, По итогам собеседования tproger.ru Вакансии на tproger.ru

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

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

1. Главная ось.
2. Поперечная ось.

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

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

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

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

HTML

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

<div class=»container»> <div class=»box-1″> </div> </div> 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; }

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

1. justify-content;
2. align-content.

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

1. justify-items;
2. align-items.

Как выровнять что-либо по горизонтали с помощью 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:

1. justify-content;
2. align-content.

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

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

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

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

1. position;
2. top, left;
3. transform, translate.

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

.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 свойств:

1. translateX;
2. translateY;
3. translateZ.

Как выровнять 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

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

1. top, left;
2. transform, translate.

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

Результат:

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

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

1. margin-top, margin-bottom;
2. margin-left, margin-right.

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

.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.

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