Опубликовано

Горизонтальное и вертикальное выравнивание элементов на CSS

Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.

Содержание статьи

  1. Горизонтальное выравнивание
  2. Вертикальное выравнивание
  3. Динамическое выравнивание элемента на странице
  4. Применение Flexbox

Последнее обновление — 1 апреля 2015.

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

margin: auto

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

elem {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

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

Демо

text-align: center

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание с помощью text-align</title>
<style>
  .wrapper {
    text-align: center;
  }
</style>
</head>
<body>
  <div class="wrapper">
    <p>Я выровнен по центру</p>
  </div>
</body>
</html>

position и отрицательный margin влево

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute, left: 50% и отрицательный margin-left, значение которого равно половине ширины элемента:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание с помощью position</title>
<style>
  .wrapper {
    position: relative;
  }
  .wrapper p {
    left: 50%;
    margin: 0 0 0 -100px;
    position: absolute;
    width: 200px;
  }
</style>
</head>
<body>
  <div class="wrapper">
    <p>Я выровнен по центру</p>
  </div>
</body>
</html>

Демо

display: inline-block + text-align: center

Способ подходит для выравнивания блоков неизвестной ширины, но требует обертку-родителя. Например таким образом можно центрировать горизонтальное меню:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание с помощью display: inline-block + text-align: center;</title>
<style>
  .navigation {
    text-align: center;
  }
  .navigation li {
    display: inline-block;
  }
</style>
</head>
<body>
  <ul class="navigation">
    <li><a href="#">Главная</a></li><!--
    <li><a href="#">Статьи</a></li><!--
    --><li><a href="#">Об авторе</a></li>
  </ul>
</body>
</html>

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

line-height

Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
.wrapper {
  height: 100px;
  line-height: 100px;
}
</style>
</head>
<body>
  <div class="wrapper">
    <p>Я выровнен по вертикали</p>
  </div>
</body>
</html>

position и отрицательный margin вверх

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

.wrapper {
  position: relative;
}
elem {
  height: 200px;
  margin: -100px 0 0;
  position: absolute;
  top: 50%;
}

Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.

Демо

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle. Все это обернем в контейнер со свойством dislpay: table;:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальное выравнивание display: table-cell</title>
<style>
  .wrapper {
    display: table;
    width: 100%;
  }
  .cell {
    display: table-cell;
    height: 100px;
    vertical-align: middle;
  }
</style>
</head>
<body>
  <div class="wrapper">
    <p class="cell">Я выровнен по вертикали</p>
  </div>
</body>
</html>

Динамическое выравнивание элемента на странице

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter(). В качестве аргумента функции выступает сам элемент:

function alignCenter(elem) {
  // код здесь
}

В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:

function alignCenter(elem) {
  elem.css({
    left: ($(window).width() - elem.width()) / 2 + 'px',
    top: ($(window).height() - elem.height()) / 2 + 'px'
    // не забывайте добавить элементу position: absolute для срабатывания координат
  })
}

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

Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:

$(function() {
  // вызов функции центрирования при готовности DOM
  alignCenter($(elem));

  // вызов функции при ресайзе окна
  $(window).resize(function() {
    alignCenter($(elem));
  })
		
  // функция центрирования элемента
  function alignCenter(elem) {
    elem.css({
      // вычисление координат left и top
      left: ($(window).width() - elem.width()) / 2 + 'px',
      top: ($(window).height() - elem.height()) / 2 + 'px'
    })
  }
})

Демо

Применение Flexbox

Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента .wrapper и центрируем контент внутри:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  height: 500px;
  width: 500px;
}

.wrapper .content {
  margin: auto;
  /* margin: 0 auto; только по горизонтали */
  /* margin: auto 0; только по вертикали */
}

  <div class="wrapper">
    <div class="content">Lorem ipsum dolor sit amet</div>
  </div>

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

На момент написания по статистике caniuse.com Flexbox поддерживает 90+ процентов браузеров. За данной технологией будущее в верстке макетов. Более подробно смотрите выступление Вадима Макеева — Flexbox, теперь понятно и читайте спецификации.

Ресурсы по теме

Рейтинг статьи

(12 голосов, в среднем: 4,25 из 5)

Похожие статьи

Комментарии читателей

  1. Дмитрий:
    14.02.2014 в 18:19

    Отличная статья!
    Однако в способ выравнивания на основе jquery я бы добавил такую правочку:


    function alignCenter(elem) {
    var left = ($(window).width() - elem.width()) / 2;
    var top = ($(window).height() - elem.height()) / 2;
    elem.css({
    left: ((left < 0) ? 0 : left) + 'px',
    top: ((top < 0) ? 0 : top) + 'px'
    })
    }

    Она не позволит уходить элементу за края при чрезмерном уменьшении размера окна.

    Ответить
  2. Сергей:
    06.02.2013 в 12:57

    Ого оказывается сколько способов.. всего парочку знал. Спасибо будем пользоваться

    Ответить

Добавить комментарий