Как разместить блок в блоке по центру с помощью CSS

Верстка не редко нуждается в таких приемах как, размещение блока внутри другого блока по центру. То есть, отцентровка блока с помощью CSS стилей, именно это сейчас разберем несколькими способами. Обычно css блок в блоке по центру размещают по горизонтали, но бывает и по вертикали или по обеим направлениям.

Отцентровка блока с помощью flexbox

Flexbox — это современный и удобный способ выравнивания элементов (блоков) внутри другого блока (контейнера). Смотрите код ниже как расположить блок по центру в css с помощью flex.

<div class="outer">
  <div class="inner">Центральный блок</div>
</div>

Этот html код создает блок с классом outer, внутри которого есть выравниваемый блок с классом inner. Следующий css код задает необходимые параметры, при которых блок inner будет выравнен по центру горизонтали и вертикали.

.outer {
  display: flex;
  justify-content: center; /* горизонтальное выравнивание */
  align-items: center;     /* вертикальное выравнивание */
  height: 300px;           /* примерная высота внешнего блока */
  background-color: #f0f0f0;
}

.inner {
  width: 150px;
  height: 100px;
  background-color: #3399ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

Отцентровка блока с помощью grid

Grid — тоже интересный и практичный инструмент для позиционирования элементов.

<div class="grid-container">
  <div class="grid-item">Центральный блок</div>
</div>

.grid-container {
  display: grid;
  place-items: center; /* центрирование по обеим осям */
  height: 300px;
  background-color: #f0f0f0;
}

.grid-item {
  width: 150px;
  height: 100px;
  background-color: #ff6600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

В данном случае place-items: center; центрирует дочерний элемент внутри контейнера.

Абсолютное позиционирование блока

Пример размещения блока по центру внутри другого блока с помощью position: absolute; на примере:

<div class="relative-container">
  <div class="centered-box">Центральный блок</div>
</div>

.relative-container {
  position: relative;
  height: 300px;
  background-color: #f0f0f0;
}
.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 100px;
  background-color: #4caf50;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

В данном примере top: 50%; и left: 50%; позиционирует верхний левый угол блока в центр, а transform: translate(-50%, -50%) сдвигает его назад ровно на половину ширины и высоты. Таким образом мы снова выполняем нашу задачу по расположению блока по центру внутри другого блока с помощью CSS.

Только что мы рассмотрели три основных способа как поставить блок по центру в css внутри другого блока. Выбор одного из способов обычно зависит от конкретной задачи и вашей основной верстки. Вам остается лишь применить один из способов и практиковаться дальше.