Как сделать выравнивание по центру в css

Для выравнивания текста, блоков и других элементов по центру в CSS используйте свойство text-align или margin.

1. Для выравнивания текста по центру:

класс-элемента {
  text-align: center;
}

Здесь класс-элемента – это селектор, который соответствует элементу, содержащему текст, который вы хотите выровнять по центру.

2. Для выравнивания блока по центру:

класс-блока {
  width: 50%; /* задайте нужную ширину блоку */
  margin: 0 auto; /* установите автоматические значения верхнего и нижнего отступов,
  а горизонтальный отступ установите как "auto"*/
}

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

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

3. Для выравнивания элемента по вертикали и горизонтали:

класс-элемента {
  width: 200px; /* задайте нужную ширину элемента */
  height: 200px; /* задайте нужную высоту элемента */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Свойство position указывает на использование абсолютного позиционирования, а свойства top, left и transform центрируют элемент внутри его родительского элемента.

Если хотите выровнять по центру только по вертикали, тогда свойство transform можно удалить, оставив только top и left, set соответствующие значения.