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

Существует несколько способов центрирования блока в CSS по центру:

  1. С помощью свойства margin и значения auto:
.block {
  width: 200px;
  height: 200px;
  margin: auto;
}
  1. С помощью свойства display и значения flex:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  width: 200px;
  height: 200px;
}
  1. С помощью свойства position и значения absolute:
.container {
  position: relative;
}
.block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. С помощью свойства text-align и значения center:
.container {
  text-align: center;
}
.block {
  display: inline-block;
}
реклама

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

реклама

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

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

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

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

Закажите услугу Как центрировать блок в css по центру

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