Есть несколько способов выровнять по центру вертикально элементы с помощью CSS:
- Использование свойства display: flex; для контейнера и свойства align-items: center; для выравнивания элементов по центру по вертикали:
.container {
display: flex;
align-items: center;
}- Использование свойства position: absolute; для элемента и комбинации свойств top: 50%; transform: translateY(-50%); для выравнивания элемента по центру по вертикали:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}- Использование свойства display: table-cell; для контейнера и свойства vertical-align: middle; для выравнивания элементов по центру по вертикали:
.container {
display: table-cell;
vertical-align: middle;
}
