CSS新手求助：如何用Flexbox将绿色按钮居中并置于容器底部？

嘿，我来帮你搞定这个按钮布局的问题！既然你已经在用Flexbox了，那咱们直接基于这个思路调整就行，很简单的～

首先，你的.box-layout__box目前只是普通的块级元素，text-align: center只能帮你实现水平居中，但要把按钮固定在容器底部，咱们得把这个白色容器也改成Flex容器才行。具体改法如下：

修改后的完整代码 #

HTML部分（无需调整结构）

<div className="box-layout">
  <div className="box-layout__box">
    <h1 className="box-layout__title">Expensify</h1>
    <p>It's time to get your expenses under control</p>
    <button className="button" onClick={startLogin}>Login with Google</button>
    <button className="button_anon" onClick={startLoginAnonymously}>Try it</button>
  </div>
</div>

CSS部分（关键修改已标注）

.box-layout {
  background: url('/images/bg.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.box-layout__box{
  background: fade-out(white, .15);
  border-radius: 3px;
  padding: $l-size $m-size;
  text-align: center;
  width: 25rem;
  /* 新增Flex布局相关属性，让容器内元素垂直排列 */
  display: flex;
  flex-direction: column;
  /* 可选：给容器一个最小高度，确保按钮始终在底部（即使内容较少） */
  min-height: 22rem;
}

.button {
  background: $blue;
  border: none;
  color: white;
  font-weight: 300;
  font-size: $font-size-large;
  padding: $s-size;
  /* 可选：给两个按钮之间加一点间距，提升视觉体验 */
  margin-bottom: 1rem;
}

.button_anon {
  background: green;
  border: none;
  color: white;
  font-weight: 300;
  font-size: 1.5rem;
  padding: 0.8rem;
  /* 关键：让按钮自动推到底部的核心属性 */
  margin-top: auto;
}

为什么这样改？ #

• 把.box-layout__box设为flex容器并指定垂直排列后，容器内的元素会从上到下有序分布；
• margin-top: auto是Flex布局的实用技巧——它会让绿色按钮自动占据容器内上方所有剩余空间，从而牢牢固定在底部；
• 保留text-align: center确保按钮在水平方向上依然居中；
• 可选的min-height是为了避免容器高度被内容撑得太矮，导致按钮看起来不是“固定在底部”的效果，你可以根据需求调整数值。

这样调整后，绿色按钮就会完美居中并固定在白色容器的底部啦～

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