Выравнивание по центру в CSS

Горизонтальное выравнивание текста

Самый распространённый и самый лёгкий тип выравнивания— это выравнивание текста с помощью свойства ‘text-align’.

p {text-align: center}

Горизонтальное выравнивание блока или изображения

Иногда выравнивать горизонтально нужно не текст, а изображение или блок. Для этого нужно установить поля блока  ‘margin’ на ‘auto’. Но при этом сам блок должен иметь фиксированную ширину.

.block {
    margin: 0 auto;
    width: 10rem;
}

img {
    display:block;
    margin:0 auto;
}

Вертикальное выравнивание

Для того чтобы выравнять вертикально блок в CSS2 нет такого свойства, но это можно сделать указав для внешнего блока свойство ‘display’ в виде ячейки таблицы ‘table-cell’, так как содержимое ячейки таблицы уже можно выравнять по вертикали.

.container {
    min-height: 10rem;
    display: table-cell;
    vertical-align: middle;
}

Выравнивание по вертикали в CSS3

В CSS3 это можно сделать с помощью свойства ‘transform’.

.container {
   height: 10rem;
   position: relative; }
 
.container p {
   margin: 0;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
}

Основные принципы:

• контейнер должен быть относительно позиционированным (position: relative);
• элемент внутри контейнера имеет абсолютное позиционирование (position: absolute);
• поместите элемент посередине контейнера с помощью ‘top: 50%’;
• используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты.

Есть еще один способ это сделать с помощью свойства  ‘display’ и его значения ‘flex’.

.container {
    height: 10rem;
    display: flex;
    align-items: center;
}

Вертикальное и горизонтальное выравнивание в CSS3

Способ с абсолютным позиционированием:

.container {
    height: 10rem;
    position: relative;
}
 
.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.container {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.container p {
    margin: 0;
}