弹性盒布局

Coddy 如何使用 CSS 居中 div 或文本课程的第 5 课，共 9 课。

居中 div 的最佳方法可能是使用 Flexbox（或其他任何方法！）

Flexbox 是一种响应式布局方法，不需要进行任何边距或位置计算。

要使用 Flexbox，请在父级 div 中添加 display: flex;，这样父级 div 就会变成一个 Flexbox 容器。要将父级中的所有内容居中，请使用 align-items: center; 和 justify-content: center;

总的来说，

#parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

注意：无需对 div 子元素做任何处理！

挑战

简单

使用 flexbox 将子 div 居中。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="parent">
            <div id="child"/>
        </div>
    </body>
</html>

如何使用 CSS 居中 div 或文本中的所有课

1简介

这门课程是什么？

2居中 div

自动外边距绝对定位：平移绝对定位：外边距弹性盒布局回顾挑战

3文本居中

文本对齐弹性盒布局最终挑战

自己练习： Web 在线编辑器