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

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

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

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

Что такое главная и поперечная оси в 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.

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