Идеальный центр

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 48 из 76.

В CSS достижение «идеального центрирования» — размещение элемента по центру родительского элемента одновременно по горизонтали и вертикали — является распространённой задачей при создании макета. Flexbox предлагает элегантное и простое решение этой задачи. Сочетая свойства justify-content и align-items, вы можете легко разместить дочерний элемент по центру flex-контейнера независимо от размера дочернего или родительского элемента.

Вот как добиться идеального центрирования с помощью Flexbox:

.container {
    display: flex; /* Сделать родительский элемент flex-контейнером */
    justify-content: center; /* Выровнять дочерний элемент по центру горизонтально вдоль главной оси */
    align-items: center; /* Выровнять дочерний элемент по центру вертикально вдоль поперечной оси */
}

Чтобы этот приём работал эффективно, убедись, что для flex-контейнера задана высота. Если высота контейнера явно не задана, он будет ровно такой высоты, как его содержимое, и вертикальное выравнивание по центру может быть незаметным.

Вот пример использования этой техники в HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Задайте контейнеру определённую высоту */
    border: 1px solid black; /* Необязательно: добавьте рамку для наглядности */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

В этом примере высота элемента .container составляет 300px, а элемент .child будет идеально центрирован внутри него по горизонтали и вертикали.

Задание

Легко

Вам дан HTML-документ с родительским элементом (<div>), содержащим дочерний элемент (<div>). Ваша задача — использовать Flexbox, чтобы идеально расположить дочерний элемент по центру родительского. Выполните следующие шаги:

Напишите правило CSS, выбирающее элемент <div> с классом parent.
Задайте свойству display элемента .parent значение flex, чтобы превратить его во flex-контейнер.
Задайте свойству justify-content элемента .parent значение center, чтобы выровнять дочерний элемент по центру по горизонтали.
Задайте свойству align-items элемента .parent значение center, чтобы выровнять дочерний элемент по центру по вертикали.
Задайте элементу .parent высоту 200px, чтобы вертикальное выравнивание по центру было заметно.

Попробуйте сами

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>