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

kotenok

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

1. Горизонтальное выравнивание по центру блока/страницы

1.1. Если для блока задана ширина:

div {
  width: 300px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {text-align: center;}

1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute; 
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}

1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:

<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}

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

2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:

.button {
  height: 50px;
  line-height: 50px;
}

2.2. Для выравнивания блока по вертикали внутри родительского блока:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {position: relative;}
.box {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

2.3. Вертикальное выравнивание по типу таблицы:

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

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

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  position: relative;
}
.box {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto; /*чтобы контент не расползался*/
}

2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

если для элемента заданы размеры

<div></div>
div {
  width: 300px; /*задаем ширину блока*/
  height:100px; /*задаем высоту блока*/
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

если для элемента не заданы размеры и он не пустой

<div>
  <h1>Some text here</h1>
</div>
h1 {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
}

2.5. Абсолютное позиционирование блока

по центру страницы

<body>
<div class="box"></div>
</body>
div {
  width: 500px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

по центру блока

<div class="wrapper">
<div class="box"></div>
</div>
.wrapper {
  position: absolute;
}
.box {
  width: 100px;
  height: 100px; /* если высота не будет задана явна, она будет равна 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
  • Михаил

    Подскажите , куда вставлять строки CSS если мне нужно выровнять элементы на партнёрском сайте , где можно только вставить HTML код.

    • Здравствуйте. Вам необходимо добавить нужные css-стили как значение атрибута style соответствующего html-тега, например,

      Some text here

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

  • Грамматический нацист

    С горизонтальным выравниванием всё просто: либо «text-align: center», либо «margin: 0 auto». Но какой психопат придумал все эти сложности с вертикальным выравниванием? Приходится городить кучу div’ов-обёрток со свойством display: table/table-cell, потом выясняется, что сломались float’ы, так как элемент с display: table-cell игнорирует свойство float. И вот в html-разметке появляются обёртки третьего уровня. Огород из абсолютного/относительного позиционирования тоже в конечном счёте выглядит ужасно.
    Непонятно, почему разработчикам стандарта CSS3 нельзя было сделать возможность писать просто вот так:
    wrapper, box: { display: block; }
    wrapper: { height: 100px; }
    box: { vertical-align: middle; }

    • Согласна, этот момент не был продуман в спецификации. К тому же высота строки тоже оказывает влияние на вертикальное выравнивание. Но с появлением концепции Flexbox эта проблема решилась, способы вертикального выравнивания вы можете посмотреть здесь http://html5book.ru/css3-flexbox/#align-items.

      • Грамматический нацист

        Большое спасибо за подсказку! 🙂 Flexbox оправдывает своё название, очень гибкая штука.

        • Пожалуйста! Если для вас не важна поддержка старых браузеров, вы можете свободно пользоваться этими свойствами.