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

Опубликовано: 31 января 2015 Обновлено: 30 апреля 2019 6 комментариев

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

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;
}

Поделиться: