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

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

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

p {text-align: center}

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

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

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

<div>
   <div class="block">Горизонтальное выравнивание изображений или блока</div>
</div>

Этот способ можно использовать для центрирования изображения:

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

<div>
    <img src="/image.png" alt="Image" />
</div>

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

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

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

<div class="container">
    <p>Вертикальное выравнивание</p>
</div>

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

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

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

<div class="container">
    <p>Выравнивание по вертикали в CSS3</p>
</div>

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

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

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

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

.container p {
    margin: 0;
}

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

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

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

<div class="container">
    <p>CSS3</p>
</div>

Способ с помощью flex:

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