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

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

  1. С помощью свойства display и align-items:
.parent {
  display: flex;
  align-items: center; /* отцентровка по вертикали */
}
  1. С помощью свойства position и transform:
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* отцентровка по вертикали */
}
  1. С помощью свойства display и margin:
.parent {
  display: table-cell;
  vertical-align: middle; /* отцентровка по вертикали */
}

.child {
  display: inline-block;
  margin: auto;
}
реклама

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

реклама

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

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

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

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

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

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