Высоту блока, в котором нужно будет выровнять текст по вертикали, а заодно и по горизонтале, возьмем равной 30vh.
Выравнивание флексбоксом:
flex
Выравнивание с помощью css-свойства display: flex
|
1 2 3 4 5 |
<div class="vh30"> <div class="flexCenter"> <h3>flex</h3> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
.vh30 { height: 30vh; } .flexCenter { height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; } |
Выравнивание таблицей:
table
Выравнивание с помощью css-свойства display: table
|
1 2 3 4 5 6 7 |
<div class="vh30"> <div class="tableCenter"> <div> <h3>table</h3> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.vh30 { height: 30vh; } .tableCenter { height: 100%; display: table; width: 100%; } .tableCenter > div { display: table-cell; vertical-align: middle; text-align: center; } |
Выравнивание трансформацией:
transform
Выравнивание с помощью css-свойства transform
|
1 2 3 4 5 |
<div class="vh30"> <div class="transformCenter"> <h3>transform</h3> </div> </div> |
|
1 2 3 4 5 6 7 8 9 |
.vh30 { height: 30vh; } .transformCenter { position: relative; top: 50%; transform: translateY(-50%); text-align: center; } |
Выравнивание с помощью псевдоэлементов:
:before
Требуется почти полная ширина блока, чтобы освободить место для псевдоэлемента и избежать проблем с адаптивностью
|
1 2 3 4 5 6 7 |
<div class="vh30"> <div class="pseudoCenter"> <div> <h3>:before</h3> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.vh30 { height: 30vh; } .pseudoCenter { height: 100%; } .pseudoCenter:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .pseudoCenter > div { display: inline-block; vertical-align: middle; text-align: center; width: 99%; } |
Добавить комментарий: