如何用Flexbox居中内容？按钮内边距不均问题求助

我尝试为.card-container类设置display:flex属性，并使用justify-content实现居中，但容器内内容毫无变化，请问我哪里出错了？同时我的第一个“Proceed to Payment”按钮，明明设置了上下0.75rem、左右4rem的padding，却出现左右内边距不均的问题。

容器示意图

HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Order summary card</title>
  <link rel="stylesheet" href="styles.css">

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
  <section id="Card-main">
    <div class="card-container">
      <div class="top-container">
        <img src="images/illustration-hero.svg" class="main-image">
      </div>
      <div class="middle-container">
        <h1 class="title">
          Order Summary
        </h1>
        <br>
        <p class="summary">
          You can now listen to millions of songs ,audiobooks and podcasts on any device anywhere you like 

        </p>
        <div class="plan-container">

        </div>
      </div>
      <div class="bottom-container">
        <button class="btn" type="button">
          Proceed to Payment
        </button>

        <button class="btn-cancel">
          Cancel Order
        </button>

      </div>

    </div>
  </section>

</body>
</html>

CSS代码 #

@import url(https://fonts.google.com/specimen/Red+Hat+Display);
:root{
--Pale-blue: hsl(225, 100%, 94%);
--Bright-blue: hsl(245, 75%, 52%);



--Very-pale-blue: hsl(225, 100%, 98%);
--Desaturated-blue: hsl(224, 23%, 55%);
--Dark-blue: hsl(223, 47%, 23%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}

/* Body Backgrounds */
body{
background-image:url(/images/pattern-background-desktop.svg);
background-repeat:no-repeat;
background-color:hsl(225, 100%, 94%) ;
font-family: "Red Hat Display", sans-serif;
}


/* Card Container */

.card-container{
    width:33%;
    height:80%;
    margin: 3em auto;
    background-color:hsl(225, 100%, 98%) ;
    border-radius: 10%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.main-image{
    width: 100%;;
}
.top-container{
    margin:0 0 2em 0;
}
h1.title{
    font-weight: 900;
}
p{
    font-size:16px;
    line-height: 2em;
    margin:2em auto;
    color:var(--Desaturated-blue);
}
.bottom-container{
    width:90%;
}
.btn{
    background-color: var(--Bright-blue);
    color: var(--Pale-blue);
    padding:0.75rem 6rem;
    border-radius: 5%;
    font-size: 16px;
    border:none;
    font-weight: 700;
    cursor:pointer;
    border-radius:12px;
    margin:0 auto;

}
.btn:hover{
    background-color: var(--Pale-blue);
    color: var(--Bright-blue);
}
.btn-cancel{
    background-color: white;
    color:var(--Desaturated-blue);
    border:none;
    cursor:pointer;
    font-weight: 700;
    font-size:0.9rem;
    margin:2em auto;


}
.btn-cancel:hover{
    color: black;
}

1. 解决flex容器居中无效的问题 #

你给.card-container设置了flex-direction: column，此时justify-content控制垂直方向对齐，要让内部内容水平居中需用align-items: center。另外，.card-container的height:80%未生效，因为父元素#Card-main和body没设置高度，容器高度由内容撑开，justify-content: center自然无效果。

修改步骤：

• 给根元素和父容器设置高度，确保百分比高度生效：

html, body {
  height: 100%;
}
#Card-main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

• 调整.card-container样式，移除margin:3em auto（父容器已居中），添加align-items: center让子元素水平居中：

.card-container{
    width:33%;
    max-width: 450px; /* 限制最大宽度，适配小屏幕 */
    background-color:hsl(225, 100%, 98%) ;
    border-radius: 12px; /* 百分比圆角在宽高不同时易变形，用固定值更稳定 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中子元素 */
    padding-bottom: 2em; /* 给底部按钮预留空间 */
}

2. 解决按钮左右padding不均的问题 #

.btn设置了margin:0 auto但未块级化，默认行内块元素的margin:auto无法生效；固定左右padding会导致不同屏幕下按钮宽度不一致，甚至文字换行。

修改步骤：

• 让按钮占满父容器宽度，仅设置上下padding，通过text-align:center保证文字居中：

.btn{
    background-color: var(--Bright-blue);
    color: white; /* 原var(--Pale-blue)与背景色接近，换成白色更清晰 */
    padding:0.75rem 0; /* 仅设置上下内边距 */
    width: 100%; /* 占满父容器宽度 */
    border-radius:12px;
    font-size: 16px;
    border:none;
    font-weight: 700;
    cursor:pointer;
    text-align: center; /* 文字水平居中 */
}

• 给.bottom-container添加布局样式，让按钮垂直排列且间距均匀：

.bottom-container{
    width:90%;
    display: flex;
    flex-direction: column;
    gap: 1em; /* 按钮间的间距 */
}

额外优化点 #

• 修正字体导入地址，使用Google Fonts的正确链接：

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

• 给.middle-container添加文字居中样式：

.middle-container {
    text-align: center;
    padding: 0 2em; /* 左右内边距避免文字贴边 */
}

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