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

#css

Какими методами в CSS Вы пользуетесь для выравнивания элементов по вертикали? 
    

Ответы

Ответ 1

Использую line-height
line-height

Пример

test


css

.test {
  line-height: 100px;
  border: 1px solid #000;
}


jsFiddle


Ответ 2

6 способов центрирования элемента неизвестного размера по вертикали и горизонтали

Вариант №1: table-cell

Самый древний вариант, которым пользовались на заре Интернета и во времена рассвета
табличной вёрстки. Таблицами уже давно никто не верстает, но имитировать их поведение
через CSS ради достижения результата – почему бы и нет?



.block {
   height: 180px; /* for Demo only */
   background: black; /* for Demo only */
   display: table;
   width: 100%;
}

.block-cell {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

   

         
   





Вариант №2: position absolute

Один из моих любимых вариантов. Идеально подходит для позиционирования попапов –
они должны быть поверх остального контента, а их высота никогда неизвестна, как и высота
экрана пользователя.



.block {
   height: 180px; /* for Demo only */
   background: black; /* for Demo only */
   position: relative;
}

.block img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

    





Вариант №3: line-height

Один из самых глупых вариантов, который хоть и подходит для выравнивание блока неизвестной
высоты, но требует фиксированную высоту родителя (в других способах высота родителя
указана лишь для примера). Кстати, этот способ также не подойдет для многострочного текста.



.block {
   background: black; /* for Demo only */
   line-height: 180px;
   text-align: center;
}

.block img {
   vertical-align: middle;
}

   





Вариант №4: центрирование через псевдоэлемент

Мой самый любимый способ. Несмотря на то, что в последнее время стал использовать
flexbox – выравнивание через псевдоэлемент навсегда останется в моём сердце.



.block {
   height: 180px; /* for Demo only */
   background: black; /* for Demo only */
   text-align: center;
}

.block:before {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

.block img {
   display: inline-block;
   vertical-align: middle;
}

   





Вариант №5: Flexbox

Один из современных и самых простых способов центрирования – использование display: flex.



.block {
   height: 180px; /* for Demo only */
   background: black; /* for Demo only */
   display: flex;
   align-items: center;
   justify-content: center;
}

   





Вариант №6: CSS Grid

Grid – наше ближайшее и светлое будущее! Никогда прежде выравнивание блоков не была
такой простой и вряд ли в скором времени что-то превзойдет CSS Grid. Хотя этот пример
и похож очень на предыдущий, возможности Grid гораздо шире. В общем, если не научились
работать с flexbox – можете смело его пропускать и разбираться с CSS Grid.



.block {
   height: 180px; /* for Demo only */
   background: black; /* for Demo only */
   display: grid;
   align-items: center;
   justify-content: center;
}