css flex

/* 使用 Flexbox 布局的示例代码 */

.container {
  display: flex; /* 将容器设置为 Flex 容器 */
  justify-content: center; /* 水平居中对齐子元素 */
  align-items: center; /* 垂直居中对齐子元素 */
  height: 300px; /* 设置容器高度 */
  border: 1px solid black; /* 添加边框以便观察布局效果 */
}

.item {
  width: 100px; /* 设置子元素宽度 */
  height: 100px; /* 设置子元素高度 */
  background-color: lightblue; /* 设置子元素背景颜色 */
  margin: 10px; /* 设置子元素之间的间距 */
}

<!-- HTML 示例代码 -->

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

解释说明：

• display: flex;：将父级容器设置为 Flex 容器，使子元素成为 Flex 项目。
• justify-content: center;：水平居中对齐子元素。
• align-items: center;：垂直居中对齐子元素。
• height: 300px;：设置容器的高度，以便更好地观察居中效果。
• .item 类用于定义每个子元素的样式，包括宽度、高度、背景颜色和间距。

通过这段代码，你可以创建一个简单的 Flexbox 布局，其中三个子元素在父容器中水平和垂直居中显示。