HTML\CSS → Отцентрировать блок по горизонтали и вертикали

Горизонтальное и вертикальное выравнивание блока распространенная задача. Опишу наиболее простые и частоипользуемые способы.

Отцентировать по горизонтали

Способ 1
Через margin: auto;, задав ширину < ширины родителя.

.center {
    margin: auto;
    width: 50%;
}

Способ 2
Через margin: auto; display: table;. Преимущество второго способа — ширина таблицы может быть динамической.

.center {
    margin: auto;
    display: table;
}

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

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

<div class="vcenter">
  <p>Content here</p>
</div>

.vcenter {
    display: table;
}
.vcenter p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

Или так:

<div class="vcenter">Content here</div>
.vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

Но при этом варианте родительский блок получит табличный алгоритм вычисления ширины (иметь ширину содержимого), а это не всегда желательно. Чтобы растянуть блок, нужно указать ширину явно, например width: 300px. В данном примере указать в процентах не получится, т.к. ячейка есть, а родительской таблицы — нет.

Способ 2
Второй вариант вертикального выравнивания базурется на использовании трансформаций:

<main>
    <div>Content centered vertically</div>  
</main>

main { position: relative; }
main div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Способ 3
Использовать возможности flexbox:

<div class="vcenter">Centered content with flexbox</div>
.vcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

Если центруемых элементов в контейнере будет несколько, то они онтцентрируются по вертикали и горизонтали и будут располагаться рядом.

Способ 4
Можно задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto:

<div class="container"><div class="message">Centered text</div></div>
.container { display: flex; }
.message { margin: auto; }

В этом случае элемент уменьшит свой размер под содержимое и отцентруется по вертикали и горизонтали. Если элементов будет несколько, то между ними будут равномерные отступы (похожие на justify-content: space-around).

В заключение: сборник решений от CSS Tricks.