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

19.04.19

Способов вертикального выравнивания существует несколько. В разных ситуациях подходят разные способы. Рассмотрим некоторые из них.

1. С помощью display: flex

Самый удобный и современный способ.

.parent{
	display: flex;
	align-items: center;	
}

2. С помощью table-cell

В ячейках таблицы vertical-align применяется к любому содержимому.

.parent{
   display: table;
}
.child{
   display: table-cell;
   vertical-align: middle;
}

3. С помощью position: absolute и top

Подходит для случаев с известной высотой дочернего блока. Принцип действия заключается в свойстве top: 50% (половина родительского блока) и отрицательном отступе сверху в половину дочернего блока. Таким же образом можно и центрировать блок по горизонтали. Использовав только left: 50% и отрицательный margin слева.

.parent{
    position: relative;
}
.child{
    position: absolute;
    height: 50px;
    top: 50%;
    margin-top: -25px;
}

4. С помощью position: absolute и margin

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

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;
    height: 30px; /*свое значение*/
    width: 200px; /*свое значение*/
}

5. Выравнивание одной строки

Значения высоты блока и высоты строки должны быть одинаковые.

height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
text-transform: uppercase;
blog comments powered by Disqus