css display: flex

/* CSS 代码 */
.container {
  display: flex;
  /* 主轴方向为水平，从左到右 */
  flex-direction: row;
  /* 子元素在主轴上居中对齐 */
  justify-content: center;
  /* 子元素在交叉轴上居中对齐 */
  align-items: center;
  /* 容器高度设置为200px */
  height: 200px;
}

.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;：将 .container 设置为弹性盒子容器，使其子元素（.item）成为弹性项目。
• flex-direction: row;：定义主轴方向为水平，即子元素从左到右排列。
• justify-content: center;：使子元素在主轴上居中对齐。
• align-items: center;：使子元素在交叉轴上居中对齐。
• height: 200px;：设置容器的高度为200像素。
• .item 类设置了每个子元素的宽度、高度、背景颜色和间距。