不管是Flexbox还是CSS Grid，都能轻松让卡片里的按钮同时居中对齐且固定在卡片底部，我给你分别拆解具体实现方式：

一、用Flexbox实现的思路 #

核心是利用Flex的flex-grow属性让卡片内容区占据剩余空间，把按钮“挤”到底部，再通过居中属性让按钮水平居中：

假设你的卡片结构是这样的：

<div class="card-container">
  <div class="card">
    <div class="card-content">
      这里是卡片的可变长度内容，可能有的长有的短
    </div>
    <button class="card-btn">点击按钮</button>
  </div>
  <div class="card">
    <div class="card-content">
      这里是更长的卡片内容，测试不同长度下按钮的位置是否一致
    </div>
    <button class="card-btn">点击按钮</button>
  </div>
</div>

对应的CSS：

.card-container {
  display: flex;
  gap: 1rem; /* 卡片之间的间距 */
}
.card {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid #eee;
  padding: 1rem;
  height: 100%; /* 让所有卡片高度一致 */
}
.card-content {
  flex-grow: 1; /* 占据卡片除按钮外的所有剩余空间 */
}
.card-btn {
  margin: 0 auto; /* 按钮水平居中 */
}

这样不管卡片内容长短，按钮都会固定在卡片底部，同时保持水平居中。

二、用CSS Grid实现的思路 #

Grid的实现更直观，直接把卡片分成两行：内容行占满剩余高度，按钮行自适应高度，再让按钮在单元格内居中：

同样用上面的HTML结构，CSS调整为：

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 1rem;
}
.card {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满高度，第二行自适应 */
  border: 1px solid #eee;
  padding: 1rem;
}
.card-btn {
  justify-self: center; /* 在Grid单元格内水平居中 */
}

这个方案同样能达到你要的效果，而且代码逻辑更清晰，适合喜欢Grid布局的场景。

两种方案都能完美满足你的需求，你可以根据自己的布局习惯选择其中一种~

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