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

Есть несколько способов поставить элементы по центру с помощью CSS:

  1. Для блочных элементов можно использовать свойство text-align со значением center:
.container {
  text-align: center;
}

.element {
  display: inline-block;
}
  1. Для элементов с известной шириной можно использовать свойство margin со значениями auto:
.container {
  width: 500px;
}

.element {
  width: 200px;
  margin: 0 auto;
}
  1. Для элементов с неизвестной шириной можно использовать свойство display со значением flex и свойства justify-content и align-items со значением center:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  /* стили элемента */
}
реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как поставить элементы по центру CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали