Выравнивание блоков для блочных, абсолютно позиционированных и табличных макетов

Свойство justify-content не применяется к блочным контейнерам или ячейкам таблицы.

Свойство align-content применяется к блочной оси для выравнивания содержимого блока внутри его контейнера. Если запрашивается метод распределения содержимого, такой как space-between, space-around или space-evenly, то используется резервное выравнивание, так как содержимое обрабатывается как один объект выравнивания.

Свойство justify-self используется для выравнивания элемента внутри его содержащего блока по оси inline.

Это свойство не применяется к плавающим элементам или ячейкам таблицы.

Свойство align-self не применяется к блочным элементам (включая плавающие), потому что в блочной оси содержится более одного элемента. Оно также не применяется к ячейкам таблицы.

Контейнер выравнивания — это позиционированный блок, учитывающий значения смещений top, left, bottom и right. Ключевое слово normal соответствует stretch, за исключением случаев, когда позиционированный элемент является замещающим элементом, в этом случае он соответствует start.

Поскольку в настоящее время браузеры не поддерживают выравнивание блоков в блочном макете, ваши варианты выравнивания — использовать один из существующих методов выравнивания или сделать даже один элемент внутри контейнера flex-элементом, чтобы использовать свойства выравнивания, как указано в flexbox.

Выравнивание блоков по горизонтали до flexbox обычно достигалось путем установки авто-отступов на блоке. margin со значением auto поглощает всё доступное пространство в этой размерности, следовательно, установив отступы слева и справа в значение auto, можно выровнять блок по центру:

.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

В табличном макете вы можете использовать свойство vertical-align для выравнивания содержимого ячейки внутри этой ячейки.

Для многих случаев использования превращение блочного контейнера в flex-элемент обеспечит необходимую возможность выравнивания. В примере ниже контейнер с одним элементом внутри преобразован в flex-контейнер для возможности использования свойств выравнивания.

<div class="box">
  <div></div>
</div>

.box {
  height: 300px;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}

• justify-content
• align-content
• justify-self
• align-self

• Объект выравнивания
• Контейнер выравнивания
• Резервное выравнивание