Для центрирования по вертикали элемента в CSS можно использовать несколько способов:
- С помощью свойства display: flex и свойств align-items и justify-content:
.parent {
display: flex;
align-items: center; /* центрирование по вертикали */
justify-content: center; /* центрирование по горизонтали */
}
- С помощью свойства position: absolute и свойств top, bottom, left, right:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%; /* смещение на 50% от верхней границы родителя */
transform: translateY(-50%); /* смещение на половину высоты элемента вверх */
}
- С помощью свойства position: absolute и свойств top и margin-top:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%; /* смещение на 50% от верхней границы родителя */
margin-top: -25px; /* смещение на половину высоты элемента вверх */
}
- С помощью свойства display: table и свойство display: table-cell:
.parent {
display: table;
height: 100%; /* высота родителя должна быть задана */
}
.child {
display: table-cell;
vertical-align: middle; /* центрирование по вертикали */
text-align: center; /* центрирование по горизонтали */
}