CSS布局教程：如何优雅地居中多元素Div并优化其内部结构

.center-box {
  width: 300px; /* 必须设置宽度 */
  margin: 0 auto; /* 上下外边距为0，左右外边距自动分配 */
  background-color: #e0f2f7;
  padding: 20px;
  border: 1px solid #a7d9eb;
  text-align: center; /* 内部文本居中，但不对元素本身起作用 */
}

<div class="center-box">
  这是一个通过 `margin: 0 auto;` 实现水平居中的Div。
</div>

body {
  background-color: #d5e1ef;
  font-family: Arial, sans-serif;
  display: flex; /* 为了演示，将body作为flex容器 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 确保body有足够高度 */
  margin: 0;
}

.card-container {
  width: 320px; /* 定义Div的宽度 */
  background-color: white;
  border-radius: 20px;
  overflow: hidden; /* 确保圆角效果 */
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* 移除 display: flex; 让内部元素按块级流垂直堆叠 */
  /* margin: 0 auto; 如果父元素不是flex容器，此行用于水平居中 */
}

.card-container img {
  max-width: 100%; /* 确保图片不会超出容器 */
  border-radius: 10px;
  display: block; /* 确保图片独占一行，消除底部默认空白 */
  margin: 0 auto 15px auto; /* 图片居中并添加底部间距 */
}

.card-container h1 {
  font-size: 22px;
  color: #1f314f;
  text-align: center; /* 标题文本居中 */
  margin-bottom: 15px;
}

.card-container p {
  font-size: 15px;
  color: #7b879d;
  text-align: center; /* 段落文本居中 */
  line-height: 1.5;
}

<div class="card-container">
  @@##@@
  <h1>Improve your front-end skills by building projects</h1>
  <p>
    Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
  </p>
</div>

body {
  background-color: #d5e1ef;
  font-family: Arial, sans-serif;
  display: flex; /* body作为flex容器 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh;
  margin: 0;
}

.card-container-flex {
  width: 320px;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  display: flex; /* 启用Flexbox */
  flex-direction: column; /* 关键：使子元素垂直堆叠 */
  align-items: center; /* 内部子元素在交叉轴（水平方向）上居中 */
  /* margin: 0 auto; 如果父元素不是flex容器，此行用于水平居中 */
}

.card-container-flex img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 15px; /* 添加图片与标题间距 */
}

.card-container-flex h1 {
  font-size: 22px;
  color: #1f314f;
  text-align: center;
  margin-bottom: 15px;
}

.card-container-flex p {
  font-size: 15px;
  color: #7b879d;
  text-align: center;
  line-height: 1.5;
}

<div class="card-container-flex">
  @@##@@
  <h1>Improve your front-end skills by building projects</h1>
  <p>
    Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
  </p>
</div>