Идеальное центрирование

Часть раздела Styling with 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 высоту height равную 200px, чтобы вертикальное центрирование было заметно.

Шпаргалка

Чтобы идеально центрировать элемент как по горизонтали, так и по вертикали с помощью Flexbox, используйте сочетание justify-content: center и align-items: center:

.container {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    height: 300px; /* Определите высоту для видимого центрирования по вертикали */
}

Flex-контейнер должен иметь определенную высоту, чтобы вертикальное центрирование было заметно.

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

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