Как отцентрировать объект css

Центрирование в CSS: Полное руководство

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

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

Поэтому давайте создадим дерево решений и, надеюсь, теперь этот вопрос станет для вас проще.
Мне нужно отцентрировать элементы.

Горизонтально

Это элементы inline или inline-* (например, текст или ссылки)?

Вы можете отцентрировать элементы inline горизонтально, в родительском элементе block-level с помощью:

.center-children < text-align: center;

 
Этот текст отцентрирован.
 

body < background: #f06d06; >header, nav < text-align: center; background: white; margin: 20px 0; padding: 10px; >nav a

Это будет работать для inline , inline-block , inline-table , inline-flex и т.д.

Это элемент уровня блока?

Вы можете отцентрировать элемент block-level , придав ему margin-left и margin-right или auto ( при этом также нужно задать width , в противном случае это будет полная ширина, и центрирование не потребуется ). Это часто делается в подобных сокращениях:

.center-me
body < background: #f06d06; >main < background: white; margin: 20px 0; padding: 10px; >.center

Это будет работать независимо от ширины элемента block-level или родительского элемента.
Обратите внимание, что вы не можете использовать привязку к центру float . Хотя, существует способ .

У вас есть более чем один элемент block-level?

Если у вас есть два или более элемента block-level , которые должны быть отцентрированы горизонтально в ряд, скорее всего вам лучше применить для них разные типы display . Вот примеры, как сделать из них inline-block и flexbox :

 
Я элемент блочного типа, у меня есть другие элементы того же уровня, и все мы отцентрированы в ряд.