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

Данный пост тоже посвятим вертикальному выравниванию. Не будем описывать все возможные способы. Одного универсального пока не существует. В разных ситуациях могут быть применены разные способы. На эту тему в интернете много информации. Рассмотрим только некоторые из них.

Если необходимо вертикально отцентрировать только одну строчку и известна высота блока, то вам подойдет способ описанный в предыдущей статье.

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

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

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

Пример 1:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus mollitia dolores ducimus voluptates, dignissimos doloremque consequuntur delectus ab aliquid.

2. С помощью before

Особенность в том что нам необходимо знать высоту родительского блока. Подходит когда высота вложенного блока нам не известна и может меняться. Ширина дочернего блока должна быть меньше родительского.

 .parent{
	height: 200px;
    text-align: center; /*необязательно*/

}
 .parent:before{
    content: "";
    display: inline-block;
    height: 100%;
    min-height: inherit;
    vertical-align: middle;
}
.child{
    display: inline-block;
    text-align: center; /*необязательно*/
    vertical-align: middle;
 }

Пример 2:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus mollitia dolores ducimus voluptates, dignissimos doloremque consequuntur delectus ab aliquid.

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

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

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

Пример 3:

Lorem ipsum dolor sit amet

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

Еще один способ центрирования с помощю абсолютного позиционирования. Высота дочернего блока должна быть фиксирована. Так же можно отцентовать дочерний блок по горизонтале. Тогда ширина тоже должна быть фиксированной.
.parent{
	position: relative;
}
.child{
	position: absolute;
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	margin: auto;
	height: 30px; /*свое зачение*/
	width: 200px; /*свое зачение*/

Пример 4:

Lorem ipsum dolor sit amet
Share: