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

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

В CSS достижение «Perfect center», то есть центрирование элемента одновременно horizontally и vertically внутри его parent, является распространённой задачей вёрстки. Flexbox предоставляет элегантное и простое решение этой проблемы. Комбинируя свойства justify-content и align-items, вы можете легко центрировать элемент child внутри его flex-контейнера независимо от размера child или parent.

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

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

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

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

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

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

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

Задание

Легко

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

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

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

<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>