在flex项中水平居中放置div

在Flex布局中，要在flex项（即flex容器的子元素）中水平居中放置一个div，可以通过设置父容器（flex容器）的CSS属性来实现。以下是具体的步骤和示例代码：

基础概念

Flex布局（Flexible Box）是一种用于为盒状模型提供最大灵活性的布局方式。通过设置display: flex;，可以使容器成为一个flex容器，其子元素成为flex项。

类型

Flex布局主要有两种类型：

行内Flex布局（display: inline-flex;）
块级Flex布局（display: flex;）

应用场景

Flex布局广泛应用于网页布局、组件设计、仪表盘等场景。

示例代码

以下是一个简单的示例，展示如何在flex项中水平居中放置一个div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Centering Example</title>
    <style>
        .container {
            display: flex; /* 设置容器为flex布局 */
            justify-content: center; /* 水平居中对齐 */
            height: 200px; /* 设置容器高度 */
            border: 1px solid black; /* 添加边框以便观察 */
        }
        .centered-div {
            width: 100px;
            height: 100px;
            background-color: blue; /* 设置背景颜色以便观察 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div"></div>
    </div>
</body>
</html>