Как центрировать элемент с помощью CSS

Центрирование элемента с помощью CSS всегда было легко для одних вещей, но сложно для других. Вот полный список того, как центрировать с помощью CSS, а также с помощью современных методов CSS.

Центрирование элемента в CSS - это совсем другая задача, если вам нужно центрировать по горизонтали или вертикали.

В этом посте я объясню наиболее распространенные сценарии и способы их решения. Если новое решение предоставленоFlexboxЯ игнорирую старые методы, потому что нам нужно двигаться вперед, а Flexbox уже много лет поддерживается браузерами, включая IE10.

По центру по горизонтали

Текст

Текст очень просто центрировать по горизонтали с помощьюtext-alignсвойство установлено наcenter:

p {
  text-align: center;
}

Блоки

Современный способ центрировать все, что не является текстом, - использовать Flexbox:

#mysection {
  display: flex;
  justify-content: center;
}

любой элемент внутри#mysectionбудет горизонтально по центру.

Center horizontally

Вот альтернативный подход, если вы не хотите использовать Flexbox.

Все, что не является текстом, можно центрировать, применив автоматическое поле слева и справа и установив ширину элемента:

section {
  margin: 0 auto;
  width: 50%;
}

вышесказанноеmargin: 0 auto;это сокращение для:

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

Не забудьте установить элемент наdisplay: blockесли это встроенный элемент.

По центру по вертикали

Традиционно это всегда было сложной задачей. Flexbox теперь предоставляет нам отличный способ сделать это самым простым способом:

#mysection {
  display: flex;
  align-items: center;
}

любой элемент внутри#mysectionбудет вертикально по центру.

Center vertically

Центрировать как по вертикали, так и по горизонтали

Методы Flexbox для центрирования по вертикали и горизонтали можно комбинировать для полного центрирования элемента на странице.

#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}

Center both vertically and horizontally

То же самое можно сделать, используяCSS-сетка:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}