Блокту горизонтал жана вертикалдуу түрдө кантип борборлоштурууга болот?

Flexbox:

• Ата-энесинде:

  .parent {
    display: flex; // Флекс-контейнерди активдештирүү
    justify-content: center; // Горизонталдык борборлоо
    align-items: center; // Түзөлүү боюнча борборлоо
  }
  

Grid:

• Ата-энесинде:

  .parent {
    display: grid; // Грид-контейнерди активдештирүү
    place-items: center; /* Горизонтал жана вертикал борборлоо.
                            Теңдеши:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute жана Transform:

.parent {
  position: relative; // Ата-эне позициялануусу керек
}

.child {
  position: absolute; // Абсолюттук позициялоо
  top: 50%; // Жогорку чекти 50% кылуу
  left: 50%; // Сол чекти 50% кылуу
  transform: translate(-50%, -50%); /* Элементти өзүнүн туурасы жана бийиктигинин жарымына жылдыруу
                                       так борборлоо үчүн */
}

Margin: auto (тек гана горизонталдык борборлоо inline-block жана block):

.element {
  display: block; // же inline-block
  width: белгилүү-ширина; // Кеңдик белгилениши керек
  margin: 0 auto; // Автоматтык сол жана оң маржалар
}