如何在居中flexbox容器内将元素对齐到底部角落且保持内容居中

实现方案 #

问题原因 #

原有代码中Next按钮和需要居中的文本内容属于同一级flex子项，父容器设置的justify-content: center会把所有子项作为一个整体垂直居中，因此按钮无法落到右下角。

修改后的代码 #

HTML

把需要居中的内容单独包裹为一个容器，和Next按钮拆分为两个独立的flex子项：

<div class="container">
  <div class="center-content">
    <h1>Welcome</h1>
    <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
    Lorem Ipsum<br>
    Lorem Ipsum
  </div>
  <a href="/" class="button">Next</a>
</div>

CSS

利用flex布局的margin-top: auto特性将按钮推到容器底部，无需绝对定位：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  min-height: 500px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  box-sizing: border-box; /* 避免padding撑宽容器，适配全尺寸设备 */
  
  background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
  background-size: 80px 80px;
  background-position: bottom right 2rem; /* 和按钮位置对齐，可按需调整 */
  background-repeat: no-repeat;
}

.center-content {
  flex-shrink: 0; /* 避免容器过小时内容被压缩 */
}

.container a{
  align-self: flex-end;
  margin-top: auto; /* 核心属性：自动填充上方剩余空间，将按钮推到底部 */
  margin-bottom: 2rem; /* 和背景图下间距对齐，可按需调整 */
}

适配说明 #

• 居中内容会始终保持在容器垂直中心，不受容器高度变化影响
• 按钮位置和右下角背景图对齐，边距可根据需求调整
• 全尺寸设备兼容，无固定定位硬编码值

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