Как да центрирате блок както хоризонтално, така и вертикално?

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; // Автоматични отстояния отляво и отдясно
}