如何将页脚指定文本对齐到右下角 同时保持版权信息水平垂直居中

需求说明 #

需要实现页脚区域的两个文本排布要求：

• Copyright © 2022 Jessica Smith 在页脚范围内始终保持水平、垂直双向居中
• Created by Derrick Ogole Web Services 固定在页脚右下角

原有代码问题 #

原有代码将两个文本块放在正常文档流中上下排布，仅设置了文本水平对齐：

• 版权文本只做了水平居中，没有实现垂直居中
• 创作者文本无法和版权文本并行排布到右下角位置

推荐实现方案（改动最小） #

使用相对定位+绝对定位+flex布局，版权文本通过绝对定位脱离正常流实现完全居中，不会被右侧文本挤压偏移，创作者文本通过flex排布到右侧垂直居中位置。

修改后的CSS代码 #

.footer-section {
  background-color: #000;
  /* 替换原上下80px内边距为最小高度，方便做垂直对齐，可根据设计需求调整数值 */
  min-height: 160px;
  padding: 0 30px;
  color: #fff;
  /* 给内部绝对定位元素提供定位参照 */
  position: relative;
  /* flex布局实现右侧文本垂直居中+右对齐 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.copyright {
  /* 清除p标签默认外边距 */
  margin: 0;
  /* 绝对定位实现水平垂直双向居中，不受其他元素影响 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.copyright-creator {
  /* 清除p标签默认外边距 */
  margin: 0;
}

HTML代码 #

原有HTML结构无需任何调整，直接复用即可：

<section class="footer-section">
  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>
  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>
</section>

可选Grid布局方案 #

如果不想使用绝对定位，也可以通过Grid布局实现同样效果，CSS代码如下：

.footer-section {
  background-color: #000;
  min-height: 160px;
  padding: 20px 30px;
  color: #fff;
  display: grid;
  /* 所有子元素默认居中 */
  place-items: center;
}

.copyright {
  margin: 0;
  /* 让版权元素占满整个网格容器，实现居中时不被其他元素挤压 */
  grid-area: 1 / 1 / -1 / -1;
}

.copyright-creator {
  margin: 0;
  /* 创作者文本定位到网格右下角 */
  justify-self: end;
  align-self: end;
}

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