Skip to content
HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

Техники центрирования на CSS

1. Центрирование текстового содержимого

1.1. Горизонтальное центрирование текста

  • родитель должен иметь конкретную ширину

Стили

.parent {
   text-align: center;
}

Демо: text-align.html

1.2. Центрирование внутренними отступами

  • родитель не может иметь конкретную ширину и высоту, они высчитываются в зависимости от контента
  • может иметь максимальную ширину, контент будет переноситься по строкам
  • родитель должен быть строчным

Стили

.parent {
   display: inline-block;
   max-width: 200px; /*optional*/
   padding: 10px 30px;
   text-align: center;
}

Демо: padding.html

1.3. Вертикальное центрирование высотой строки

  • ограничение на перенос строк, может быть только одна строка
  • всегда нужно дублировать величину высоты элемента для высоты строки
  • может комбинироваться с вариантами 1.1 и 1.2 для горизонтального центрирования

Стили

.parent {
   height: 50px;
   line-height: 50px;
}

Демо: line-height.html

1.4. Вертикальное центрирование ячейкой таблицы

  • нет ограничений по высоте и ширине; они могут быть как заданы, так и нет
  • может комбинироваться с вариантами 1.1 и 1.2 для горизонтального центрирования
  • вертикальный центр высчитывается автоматически
  • ограничение: содержимое может быть только строчным
  • если используется box-sizing: border-box, то присутствие border может повлиять на расчёт величины высоты строки

Стили

.parent {
   display: table-cell;
   vertical-align: middle;
   height: 50px;
}

Демо: table-cell.html

2. Горизонтальное центрирование колонки

  • только горизонтальное центрирование
  • только для блочных элементов с указанной шириной

Стили

.centered {
   display: block;
   width: 800px;
   margin: auto;
}

Демо: block-margin-auto.html

2. Центрирование в строке

2.1. Горизонтальное центрирование в строке

  • можно использовать на нескольких элементах расположенных рядом
  • text-align наследуется дочерними элементами, поэтому надо его перекрывать

Стили

.parent {
   text-align: center;
}
.centered {
   display: inline-block;
   text-align: center; /*custom internal centering*/
}

Демо: inline-center.html

2.2. Вертикальное центрирование в строке c псевдо-элементом

  • работает с одним и более элементами
  • ограничение: не может быть переноса строк

Стили

.parent {
   height: 100%; /*any*/
}
.parent::after {
   content: '';
   display: inline-block;
   vertical-align: middle;
   width: 1px;
   height: 100%;
}
.centered {
   display: inline-block;
   vertical-align: middle;
}

Демо: inline-pseudo.html

3. Абсолютное позиционирование и отрицательный margin

  • заданы ширина и высота
  • нужно высчитывать значения margin в зависимости от размеров
  • работает как position: absolute, так и с position: relative

Стили

.centered {
   position: absolute;
   width: 600px;
   height: 400px;
   top: 50%;
   left: 50%;
   margin-left: -300px; /*50% of width*/
   margin-top: -200px; /*50% of height*/
}

Демо: absolute-margin.html

4. Абсолютное позиционирование и сдвиг с помощью transofrm

  • не обязательно задавать ширину и высоту
  • может размываться текст
  • работает как position: absolute, так и с position: relative

Стили

.centered {
   position: absolute;
   width: 600px;
   height: auto; /*optional*/
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Демо: absolute-transform.html

5. Абсолютное позиционирование по 4 сторонам

  • заданы ширина и высота

Стили

.centered {
   position: absolute;
   width: 600px;
   height: 300px;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

Демо: absolute-4-sides.html

6. Центрирование с помощью табличных стилей

  • не обязательно задавать ширину и высоту
  • нужно использовать дополнительную обёртку
  • text-align наследуется дочерними элементами, поэтому надо его перекрывать

Стили

.extra-parent {
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
}
.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  display: inline-block;
  text-align: left;  /*redefine*/
  width: 600px; /*optional*/
  height: auto; /*optional*/
}

Демо: table-layout.html

7. Flexbox

  • не обязательно задавать ширину и высоту
  • можно центрировать несколько элементов рядом
  • элементы могут располагаться даже на нескольких строках и колонках
  • трудно запоминаемый и не интуитивно понятный синтаксис (субъективно)
  • работает только в новых браузерах (https://caniuse.com/#search=flex)

Стили

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.centered {
   /*any*/
}

Демо: flexbox.html

7. Grid

  • не обязательно задавать ширину и высоту
  • можно центрировать несколько элементов рядом, но надо выбирать в каком направлении: по вертикали или горизонтали
  • работает только в браузерах выпущенных позже середины 2017 года (https://caniuse.com/#search=grid)

Стили

.parent {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-auto-flow: column; /* 'column' - horizontal, 'row' - vertical*/
}
.centered {
   /*any*/
}

Демо: grid-layout.html

Ссылки

You can’t perform that action at this time.