求助：为何.pricing-container元素无法实现居中对齐？

核心问题 #

你给.pricing-container设置的align-items: center和justify-content: center是Flex布局的专属属性，但你没有给容器开启Flex布局，浏览器根本不会识别这两个属性，自然无法实现居中。

修复步骤 #

1. 给容器开启Flex布局并设置高度 #

要让容器内的元素水平+垂直居中，必须先给.pricing-container添加display: flex，同时设置min-height: 100vh让容器占满整个视口高度，还要清除body默认的margin避免留白：

body {
  font-family: 'Sono', sans-serif;
  margin: 0; /* 清除默认边距 */
}

.pricing-container {
  display: flex; /* 必须添加这行，开启Flex布局 */
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 占满视口高度，实现垂直居中 */
  gap: 20px; /* 给卡片之间添加间距，比子元素的gap更合理 */
}

2. 优化子元素布局 #

.pricing-plan的display: inline-flex可以改成display: flex，因为父容器已经是Flex布局，子元素不需要再用inline-flex：

.pricing-plan {
  display: flex;
  gap: 15px;
  width: 25%;
  padding: 15px;
  border-radius: 10px;
  flex-direction: column;
  background-color: #ededed;
}

3. 修复HTML语法错误 #

你的所有<button>标签都错误地用了</a>闭合，这会导致DOM结构异常，要改成</button>：

<button class="plan-button">Sign Up</button>

修复后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <title>Flexbox Pricing Table</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet"> 

  <style>
    body { 
      font-family: 'Sono', sans-serif;
      margin: 0; /* 清除默认边距 */
    }

    .pricing-plan {
      display: flex; 
      gap: 15px;
      width: 25%;
      padding: 15px;
      border-radius: 10px;
      flex-direction: column;
      background-color: #ededed ;
    }

    .pricing-container {
      display: flex; /* 开启Flex布局 */
      align-items: center;
      justify-content: center;
      min-height: 100vh; /* 占满视口高度实现垂直居中 */
      gap: 20px; /* 卡片间距 */
    }

    .plan-title {font-size: x-large;}
    .plan-price { font-size: xx-large;}

    .plan-button { 
      background-color: orange;
      border: none; /* 移除默认边框 */
      border-radius: 6px;
      height: 30px;
      cursor: pointer; /* 添加鼠标悬停效果 */
    }

    ul {list-style-type: none; padding-left: 0;} /* 清除默认内边距 */
  </style>

</head>

<body>
  <div class="pricing-container">
    <div class="pricing-plan">
      <div class="plan-title">Basic</div>
      <div class="plan-price">$9.99/month</div>
      <ul class="plan-features">
        <li>✅ 10GB Storage</li>
        <li>✅ 1 User</li>
        <li>🚫 Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>

    <div class="pricing-plan">
      <div class="plan-title">Standard</div>
      <div class="plan-price">$19.99/month</div>
      <ul class="plan-features">
        <li>✅ 50GB Storage</li>
        <li>✅ 5 Users</li>
        <li>✅ Phone & Email Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>

    <div class="pricing-plan">
      <div class="plan-title">Premium</div>
      <div class="plan-price">$49.99/month</div>
      <ul class="plan-features">
        <li>✅ 100GB Storage</li>
        <li>✅ 10 Users</li>
        <li>✅ 24/7 Support</li>
      </ul>
      <button class="plan-button">Sign Up</button>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Aditya Hota