Горизонтальное и вертикальное выравнивание

▲▼
◀►

Центрирование элементов
по горизонтали и вертикали

Выравнивание элементов по центру

Чтобы горизонтально выровнять по центру блоковый элемент (например, <div>), можно использовать свойство margin: auto;.

Определение ширины элемента предотвратит его вытягивание до границ контейнера.

При таких установках элемент займет заданную ширину, а оставшееся пространство будет поровну поделено между двумя отступами:

Это элемент div расположен по центру.


.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Внимание! Выравнивание по центру не будет работать, если свойство width не установлено (или установлено в 100%).

Выравнивание текста по центру

Чтобы внутри элемента выровнять только текст, используется свойство text-align: center;.

Этот текст выровнен по центру.


.center {
  text-align: center;
  border: 3px solid green;
}

Выравнивание изображения по центру

Чтобы выровнять изображение по центру, нужно сделать элемент блоковым и установить левый и правый отступы в значение auto:

Париж

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Выравнивание по левому/правому краю - Используем свойство position

Один из способов выровнять элемент по левому или правому краю, это использовать свойство position: absolute;:

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


.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Внимание! Абсолютное позиционирование элемента удаляет его из обычного потока вывода. В результате этого такой элемент может перерывать другие элементы.

Выравнивание по левому/правому краю - Используем свойство float

Другой способ выровнять элемент по левому или правому краю, это использовать свойство float:

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


.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Прием clearfix

Если высота плавающего элемента (с заданным свойством float) больше, чем высота его контейнера, то он будет "переполнять" его и выходить за его пределы. Чтобы это исправить, можно воспользоваться специальным приемом clearfix.

Без clearfix

С clearfix

Мы можем добавить к элементу контейнеру специальный код, который решит эту проблему:


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Центрирование по вертикали - Используем свойство padding

В CSS существует множество способов центрирования элемента по вертикали. Самое простое решение, это использовать свойства padding-top и padding-bottom:

Я центрирован по вертикали.


.center {
  padding: 70px 0;
  border: 3px solid green;
}

Чтобы центрировать и по вертикали и по горизонтали, используются свойства padding и text-align: center:

Я центрирован вертикально и горизонтально.


.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Центрирование по вертикали - Используем свойство line-height

Еще один способ центрировать элемент вертикально, это использовать свойство line-height со значением, равным значению свойства height:

Я центрирован вертикально и горизонтально.


.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* Если в тексте несколько строк, добавьте такой код: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Центрирование по вертикали - Используем свойства position и transform

Если свойства padding и line-height использовать не хочется, то есть другое решение — использовать позиционирование и свойство transform:

Я центрирован вертикально и горизонтально.


.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Центрирование по вертикали - Используем Flexbox

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

Я центрирован вертикально и горизонтально.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}