Как выровнять контент по центру CSS

Для выравнивания контента по центру в CSS можно использовать различные приемы, в зависимости от типа контента и контейнера, в котором он располагается.

1. Для блочного элемента, который занимает всю ширину родительского контейнера:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

2. Для блочного элемента, который занимает не всю ширину родительского контейнера:

.container {
  text-align: center;
}

.container > div {
  display: inline-block; /* переводим блок на строку */
}

Этот способ выравнивает внутренний блок по центру по горизонтали. Например, если внутри контейнера находится <div>, то можно задать ему display: inline-block, чтобы он стал элементом-строкой и размещался по центру блока-контейнера.

3. Для текста:

.container {
  text-align: center;
}

Текст внутри контейнера будет выровнен по центру по горизонтали.

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