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

Для центрирования элемента в CSS можно использовать несколько способов:

  1. С помощью свойства text-align: center для родительского элемента и display: inline-block для самого элемента:
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
  1. С помощью свойства margin: auto для самого элемента и задания ширины:
.child {
  width: 50%;
  margin: auto;
}
  1. С помощью свойства flexbox для родительского элемента:
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. С помощью свойства grid для родительского элемента:
.parent {
  display: grid;
  place-items: center;
}
реклама

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

реклама

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

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

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

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

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

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