Работающие методы центрирования с помощью CSS

центрирование

# Горизонтальное центрирование

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

 

1. Центрируемый элемент строчный (inline):

Можно назначить родительскому контейнеру свойство text-align:center. Ниже пример:

See the Pen wzjPWN by Ruslan (@rkaliev) on CodePen.0

 

2. Центрируемый элемент блочный (block):

В этом случае задаем ему ширину (иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрированиии)  и автоматическую установку левого и правого полей:   margin-left: auto и  margin-right: auto. Часто используют такую сокращённую запись: margin: 0 auto;  Этот способ работает вне  зависимо от ширины центрируемого блочного элемента и его родителя. Ниже пример:

See the Pen BLxmLr by Ruslan (@rkaliev) on CodePen.0

 

3. Несколько  блочных элементов  в ряду:

Можно указать для них тип отображения inline-block или же применить flexbox. Ниже пример:

See the Pen YGLEpa by Ruslan (@rkaliev) on CodePen.0

 

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

Что же касается текста, то многие для центрирования по вертикали начинают  использовать свойство vertical-align, что вполне логично.  Но, к сожалению, оно не действует в блочных элементах (например,в  параграфах (p) внутри элемента (div)).  Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.

 

1. CSS метод со свойствами таблиц

Свойство vertical-align отлично действует для ячеек таблиц.  Представим родительский элемент как таблицу, а дочерний как ячейку и применим свойство  vertical-align: middle для вертикального центрирования содержания. В итоге контент в элементе-потомке отцентрируется по вертикали. Рассмотрим наш пример:

centriruem

 

HTML:

 

CSS:

 

 

2. Центрирование с помощью внутренних отступов (если элемент строчный )

Если элемент помещается в одну строку, то его можно отцентрировать с помощью одинаковых верхних и нижних внутренних отступов (padding).

CSS:

Пример:

See the Pen JRvOEJ by Ruslan (@rkaliev) on CodePen.0

 

3.  Использование line-height

Если предыдущий  способ  вам не подходит, а вы хотите отцентрировать текст, чтоб он не переносился на  следующую строку, можно использовать  line-height равный высоте элемента:

CSS:

Пример:

See the Pen ALabqL by Ruslan (@rkaliev) on CodePen.0

 

4. Абсолютное позиционирование (если элемент блочный)

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

CSS:

Пример:

See the Pen jrxamO by Ruslan (@rkaliev) on CodePen.0

Если вам не известна высота центрируемого элемента, то решение тоже есть. Поднять вверх на половину его высоты после того, как сдвинули его наполовину вниз:

CSS:

А вот и пример:

See the Pen LRmOyO by Ruslan (@rkaliev) on CodePen.0

 

5. Использование  flexbox (если элемент блочный)

Используя flexbox, можно всё сделать проще с меньшим количеством кода.

CSS:

А вот и пример:

See the Pen mALqmG by Ruslan (@rkaliev) on CodePen.0

 

 

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

1.  Фиксированная высота и ширина элемента

Если у элемента фиксированная высота и ширина, то используем отступы с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, это и отцентрирует элемент внутри родителя. Способ хорошо поддерживается браузерами.

CSS:

Пример:

See the Pen yajPXY by Ruslan (@rkaliev) on CodePen.0

 

2.  Высота и ширина элемента неизвестны

Если вам неизвестны ширина или высота центрируемого элемента, то можно воспользоваться свойством transform и отрицательным значением translate по 50% в обеих направлениях (вычисляется от текущей ширины/высоты элемента):

CSS:

 

3. Flexbox снова приходит на помощь

Для центрирования горизонтально и вертикально подойдет также flexbox:

CSS:

 

See the Pen vXjWkA by Ruslan (@rkaliev) on CodePen.0

 

Источник: css-tricks.com