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

Так давайте же сделаем несколько шаблонных решений для всех возможных вариантов…

И так, если нужно центрировать…

Вы можете выровнять элементы внутри блока просто задав ему стиль:

{Центрирование текста по горизонтали}

Такой подход будет работать для элементов inline, inline-block, inline-table, inline-flex, и т.п.

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

{Центрирование блока по горизонтали}

Это будет работать независимо от ширины нашего блочного элемента или его родителя.

Если у вас есть два или более блочных элемента, которые нужно центрировать горизонтально в строке, то можно это сделать через свойство display двумя способами. Вот примеры с использованием значения inline-block и flexbox:

{Центрирование нескольких блоков по горизонтали}

Вертикальное выравнивание с помощью CSS немного сложнее.

  • Это одна строка?
  • Это несколько строк?

Иногда выровнять текстовые или inline элементы можно просто задав одинаковый отступ сверху и снизу:

{Центрирование строки текста вертикально отступами}

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

{Центрирование строки текста вертикально строчным интервалом}

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

{Центрирование нескольких строк вертикально в таблице}

Если табличный вид вас не устраивает, то может быть вам подойдет flexbox? Один flex может быть легко отцентрирован внутри другого.

{Центрирование нескольких строк вертикально в flexbox}

Помните, что этот метод будет работать, если контейнер имеет фиксированную высоту (px, % и т.д.), поэтому для контейнера здесь задана высота.

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

{Центрирование нескольких строк вертикально псевдоэлементом}
  • Высота задана?
  • Высота не задана?
  • Хотите ли вы использовать flexbox?

Если вам известна высота объекта, то расположить его вертикально по центру можно так:

{Центрирование блока с известной высотой вертикально}

В случае, когда высота не задана, можно объект сдвинуть к центру на 50% и затем поднять его на 50% от его высоты. Вот так:

{Центрирование блока с неизвестной высотой вертикально}

Немного проще добиться центрирования блока по вертикали с помощью flexbox.

{Центрирование блока с неизвестной высотой вертикально с flexbox}

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

Использование отрицательных величин полей, равных половине ширины и высоты, после того как вы абсолютно позиционировали объект 50% / 50%, поместит его в ценр, сохранив при этом достаточно хорошую кроссбраузерность:

{Центрирование блока с известной высотой и шириной горизонтально и вертикально по центру}

Если высота и ширина блока неизвестны, можно использовать свойство transform и отрицательный сдвиг по вертикали и горизонтали на 50%:

{Центрирование блока с неизвестной высотой и шириной горизонтально и вертикально по центру}

Для центрирования в обоих направлениях с использованием flexbox, нужно использовать два свойства центрирования:

{Центрирование блока с неизвестной высотой и шириной горизонтально и вертикально по центру с flexbox}

Теперь вы обладаете полным инструментарием для выравнивания по центру чего угодно, и где угодно, с помощью CSS разумеется 🙂

Комментариев нет

Ваш комментарий будет первым.

Оставить комментарий

Вы не указали свое имя. Введите правильный email адрес. А комментарий то где?