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

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

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

1
p {text-align: center}

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

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

1
2
3
4
.block {
    margin: 0 auto;
    width: 10rem;
}

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

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

1
2
3
4
img {
    display:block;
    margin:0 auto;
}

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

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

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

1
2
3
4
5
.container {
    min-height: 10rem;
    display: table-cell;
    vertical-align: middle;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
.container {
   height: 10rem;
   position: relative; }
 
.container p {
   margin: 0;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
}

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

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

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

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

1
2
3
4
5
.container {
    height: 10rem;
    display: flex;
    align-items: center;
}

1
2
3
.container p {
    margin: 0;
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
    height: 10rem;
    position: relative;
}
 
.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

1
2
3
<div class="container">
    <p>CSS3</p>
</div>

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

1
2
3
4
5
6
7
8
9
10
.container {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.container p {
    margin: 0;
}

 

#Верстка CSS