Вертикальное выравнивание изображения в Div: методы центрирования изображений по вертикали

Чтобы выровнять изображение по вертикали внутри

, вы можете использовать несколько методов. Вот некоторые часто используемые подходы:

  1. CSS Flexbox:
    Вы можете использовать CSS Flexbox для вертикального выравнивания изображения внутри

    . Примените следующие стили к родительскому элементу

    :

    центр;

  2. CSS Grid:
    CSS Grid — еще один метод, который вы можете использовать. Примените следующие стили к родительскому

    :

    .parent {
 display: grid;
 place-items: center;
}

  3. Позиционирование CSS.
    Вы можете использовать позиционирование CSS для вертикального выравнивания изображения. Примените следующие стили к родительскому элементу

    :

  4. Таблица CSS:
    Применение свойств таблицы к родительскому элементу

    также позволяет добиться вертикального выравнивания. Используйте следующие стили:

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

  5. Высота строки CSS:
    Этот метод работает, когда родительский элемент

    имеет известную высоту. Примените следующие стили к родительскому

    :

    .parent {
 line-height: <div-height>px;
 text-align: center;
}