Центрирование (горизонтальное и вертикальное) при помощи CSS 3

Главная » Верстка

Верстка

Автор Алексей На чтение 3 мин Просмотров 988 Опубликовано Обновлено

Сегодня поговорим о том как при помощи css 3 отцентрировать элементы по вертикали и горизонтали.

Содержание

  1. Центрирование по вертикали
  2. Абсолютное позиционирование (transform)
  3. Вертикальное центрирование с использованием flex
  4. Вертикальное и горизонтальное центрирование
  5. Центрирование в области просмотра

Центрирование по вертикали

Абсолютное позиционирование (transform)

Вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент.

Например:

Для html разметки, которая выглядит так:

<div>
   <p>Какой то текст…</p>
</div>

Со следующими базовыми стилями (css правилами):

.container {
   height: 10em;
}
.container p {
   margin: 0;
}

В таблицу стилей добавить основные правила:

  1. Делаем контейнер относительно позиционированным (position: relative).
  2. Сам элемент делаем абсолютно позиционированным (position: absolute).
  3. Помещаем элемент посередине контейнера с помощью ‘top: 50%’. (делаем отступ на 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
.container {
   height: 10em;
   position: relative                /* 1 */
}              
.container p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%)     /* 4 */
}

Вертикальное центрирование с использованием flex

Возьмем выше приведенную html структуру и базовые CSS классы. Допишем им классы выравнивания при помощи flex:

.container {
   height: 10em;
   display: flex;                /* 1 */
   align-items: center           /* 2 */ 
}              
.container p {
   margin: 0;
}

Т.к. не все браузеры идеально поддерживают технологию flex, для лучшей поддержки советую воспользоваться бесплатным инструментом: Autoprefixer.

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

Мы можем расширить методs указанные выше, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). Разметку и стили берем с «Абсолютное позиционирование (transform)». Теперь добавим классы горизонтального выравнивания с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

. container {
    height: 10em;
    position: relative 
}
.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

А если использовать ‘flex’, всё становится намного легче:

.container {
  height: 10em;
  display: flex;
  align-items: center;
  
 
justify-content: center 
}
.container p {
  margin: 0 
}

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
 
 }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое. 
  </section>

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Поделиться с друзьями

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

( 1 оценка, среднее 4 из 5 )

Выравнивание контента по центру блока со скролом

Горизонтальное и вертикальное выравнивание внутри родительского блока со скролом

  • Post author: