如何实现div容器内段落文本水平与垂直双向居中对齐

问题场景 #

开发页脚模块时，.copyright段落文本在父级.footer-container容器内垂直位置偏上，需要调整CSS实现该段落同时水平、垂直居中。

原有代码 #

CSS部分

.footer-container {
  background-color: #000;
  padding: 100px 0 100px 0;
}

.copyright {
  text-align: center;
  color: #fff;
  text-align: center;
}

.copyright-derrick {
  position: relative;
  color: #fff;
  text-align: right;
  margin-right: 25px;
  bottom: -80px;
}

HTML部分

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

问题原因 #

• 父容器仅通过上下内边距撑开高度，没有配置垂直居中的布局规则
• 右下角署名元素使用相对定位向下偏移80px，挤占正常文档流空间，视觉上把版权文本挤得偏上
• p标签自带默认上下外边距，会带来额外的位置偏移
• CSS存在重复声明的冗余代码

修复代码 #

直接替换原有CSS即可：

.footer-container {
  background-color: #000;
  padding: 100px 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.copyright {
  color: #fff;
  margin: 0;
}

.copyright-derrick {
  position: absolute;
  color: #fff;
  right: 25px;
  bottom: 20px;
  margin: 0;
}

实现说明 #

• 父容器开启flex纵向布局，通过justify-content: center实现垂直方向居中，align-items: center实现水平方向居中，版权文本会自动落在容器正中间
• 右下角署名改为绝对定位，固定在容器右下角，脱离正常文档流，不会干扰版权文本的位置
• 清除p标签默认外边距，避免浏览器默认样式导致的偏移
• 删掉重复声明的text-align: center冗余代码，padding属性做了简写
• 可根据实际设计需求调整min-height和署名的bottom值，匹配视觉效果

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