完美居中

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 48 课，共 76 课。

在 CSS 中，实现“完美居中”，也就是让元素在父元素内水平和垂直居中，是一种常见的布局挑战。Flexbox 为这个问题提供了简洁优雅的解决方案。结合 justify-content 和 align-items 属性，无论子元素或父元素的大小如何，你都可以轻松地让子元素在其弹性容器中居中。

下面介绍如何使用 Flexbox 实现完美居中：

.container {
    display: 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 规则，用于选中类名为 parent 的 <div> 元素。
将 .parent 元素的 display 属性设为 flex，使其成为弹性容器。
将 .parent 元素的 justify-content 属性设为 center，使子级水平居中。
将 .parent 元素的 align-items 属性设为 center，使子级垂直居中。
将 .parent 元素的 height 设为 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>