Вертикальное выравнивание в CSS. 5 самых современных способов, применимых в 2018 году

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

    Для того, чтобы сделать вертикальное выравнивание в CSS необходимо определить родительский элемент, относительно которого будет выровнен дочерний элемент.

    Во всех приведенных ниже способах будем использовать следующую разметку HTML:

    Вертикальное выравнивание через display: table

    В этом способе нам просто нужно представить родителя в виде таблицы, а дочерний элемент — соответственно в виде ячейки этой таблицы. Тогда, задав свойство дочернему элементу vertical-align: middle, мы решаем нашу задачу.

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

    Выравнивание по вертикали с применением технологии Flex

    Здесь все просто: указываем родителю свойство flex, и способы выравнивания. При этом дополнительные свойства дочернему элементу задавать не требуется.

    .parent{
         display: flex;
         align-item: center;
         
         # Выравнивание по центру
         justify-content: center;
    }

    Технология Grid

    Сегодня почти все современные браузеры поддерживают Grid, что делает возможным использование этой технологии в разработке своих приложений.

    В случае с Grid вертикальное выравнивание работает также, как и во Flex.

    .parent{
         display: grid;
         align-item: center;
    
         # Выравнивание по центру
         justify-content-: center;
    }

    Однако Grid позволяет сделать вертикальное и горизонтальное выравнивание используя только одно свойство place-items: center.

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

    Grid и margin

    Второй способ с использованием grid

    .parent{
         display: grid;
    }
    .child{
         margin: auto;
    }

    Как выровнять элемент с абсолютным позиционированием?

    В тех случаях, когда child является абсолютным, можно применить такой метод:

    .parent{
         position: relative;
    }
    .child{
         position: absolute;
         left: 50%;
         transform: translateY(-50%);
    }

    Заключение

    Безусловно существуют и другие способы решения, но в приведенные пять способов покроют 99% всех возникающих задач по вертикальному выравниванию. Если у Вас есть свои соображения, пишите, будет рады вашим коментариям. Также делитесь материалом с друзьями или коллегами в своих соцсетях.


    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам