如何使用CSS实现内容区块内文本与按钮的居中对齐

开发水族馆主题网站编写CSS样式时，区块内的文本和按钮无法实现居中显示。

预期实现效果 #

当前实际运行效果 #

原有问题代码 #

CSS部分 #

* {
  color: white;
}

.banner {
  background: #000;
}

.banner-inner {
  justify-content: center;
  align-content: center;
  text-align: center;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 5rem;
}

.banner-card1 {
  max-width: 100%;
  min-height: 100vh;
  background-image: url(./img/project2.jpg);
  background-size: cover;
  background-position: center;
  align-self: center;
}

.banner-card2 {
  width: 100%;
  min-height: 100vh;
  background-image: url(./img/project3.jpg);
  background-size: cover;
  background-position: center;
}

HTML部分 #

<section class="banner">
  <div class="container banner-container">
    <div class="banner-inner">
      <div class="banner-card1">
        <h3>AQUARIUM DESIGN</h3>
        <a href="aquarium-design.html" class="btn"> Checkout</a>
      </div>
      <div class="banner-card2">
        <h3>AQUARIUM STUFF</h3>
        <a href="aquarium-stuff.html" class="btn"> Checkout</a>
      </div>
    </div>
  </div>
</section>

问题根源 #

原有代码的居中属性全部设置在网格父容器.banner-inner上，仅能控制两个卡片网格项的排列对齐，没有给卡片容器本身配置内部内容的居中布局规则，因此卡片内的标题、按钮无法实现水平+垂直居中。另外50% 50%的网格列写法搭配固定间距，会导致总宽度超出视口，出现横向滚动条。

修复代码 #

* {
  color: white;
}

.banner {
  background: #000;
}

.banner-inner {
  display: grid;
  /* 用1fr替代固定百分比，适配gap间距避免横向溢出 */
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}

/* 提取两个卡片的公共样式，减少冗余代码 */
.banner-card1, .banner-card2 {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  /* 核心：给卡片设置弹性布局，实现内部内容水平+垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.banner-card1 {
  background-image: url(./img/project2.jpg);
}

.banner-card2 {
  background-image: url(./img/project3.jpg);
}

改动说明 #

• 合并两个卡片的重复样式，精简代码
• 给卡片容器添加弹性布局规则，让内部标题、按钮自动实现水平+垂直居中
• 调整网格列单位为1fr，适配固定间距，避免横向溢出
• 移除原有代码中冗余的无效属性：父容器上不生效的对齐属性、卡片上多余的宽度设置

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