При вёрстке страницы изначально всё расчитано на выравнивание по левому краю. Очень много сайтов, документов именно так и работают. Но с появлением мобильных устройств левое выравнивание выглядит нелепо. Это когда экран и так маленький, а картинки и текст все сбоку. Не смотря на наличие этой проблеммы, такие фреймворки как bootstrap не сделали ничего в пользу автоматического размещения по центру.

Для исполнения протокола “Mobile First” поисковой компании Google, нужно знать, как размещать элементы по центру. Устаревший метод размещения элементов по центру – это использование таблиц. Таблицы позволяют центровать элемент как по горизонтали, так и по вертикали. Анализ исходного кода показал, что даже совремённая програма для создания HTML5 анимации Hippani Animator использует таблицы для элементов анимации, там почти все элементы сидят в своей таблицы.

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

<table>
  <tr>
    <th>Firstname</th>
  </tr>
</table>

А вот так выглядит современный блочный элемент DIV, который выполняет ту же функцию.

<div>
Firstname
</div>

Как видите, использование таблицы не целесообразно. К тому же там есть еще ряд причин, которых мы рассматривать не будем.

Горизонтальное центрирование по-старому

Вы можете применить правило text-align: center к элементу-оболочке. Внутренний родительский элемент, UL в этом примере, должен быть установлен на display: inline-block.

.is_div {
    text-align:center;
    width: 100%;
}
.is_div div {
    display:inline-block;
    width: 300px;
}

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

Сегодня у нас есть лучший способ, CSS Flexbox.

CSS Flexbox

Несколько лет назад Flexbox был добавлен в стандарты CSS для управления распределением пространства и выравниванием элементов. По сути, это синтаксис одномерного макета.

В сочетании с более новыми CSS Grid веб-разработчики имеют мощные синтаксисы, упрощающие управление сложными макетами.

Мы говорим об одномерном элементе управления макетом, но на самом деле это означает и оси x, и y. Как вы увидите, выравнивание вдоль каждой оси управляется различными свойствами.

Flexbox поддерживается всеми современными браузерами, включая неудачливый Internet Explorer. Таким образом, вы можете уверенно использовать flexbox для правил макета CSS.

    <div class="example">
        <div>How to Center</div>
    </div>

    .example {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
        margin: 10% 0;
        min-height: 200px;
        background-color: grey;
    }

Этот пример показывает вот такой отличный вариант выполнения:

Проверить вы сможете на https://jsfiddle.net/

Если данная статья помогла вам, оставьте комментарий и поделитесь в социальной сети.