使用Bootstrap 5实现文本垂直水平居中时出现内容重叠如何解决

问题原因 #

你给两个<h1>元素都设置了position-absolute top-50 start-50 translate-middle属性，这会让两个元素的中心点都对齐到页面正中心，自然会出现重叠。而且<br>标签对绝对定位元素没有排版效果，没法起到换行分隔的作用。

解决方法 #

优先用Bootstrap原生的flex布局实现容器级别的垂直水平居中，不需要给单个文本元素设置绝对定位：

1. 给外层父容器（此处直接用body即可）设置最小高度为视口高度，开启flex布局，设置垂直、水平居中，flex方向为纵向排列
2. 两个文本元素直接放在父容器内，无需额外定位属性

修正后代码 #

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body 加上flex相关类 -->
<body class="min-vh-100 d-flex justify-content-center align-items-center flex-column text-center">
  <h1 class="fw-light fs-1">Velkommen</h1>
  <h1 class="fw-light fs-4">HTX 2021 - 2024</h1>
</body>

如果必须使用绝对定位实现，也可以将两个文本元素包裹在同一个定位容器内，修改代码如下：

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="position-absolute top-50 start-50 translate-middle text-center">
  <h1 class="fw-light fs-1">Velkommen</h1>
  <h1 class="fw-light fs-4">HTX 2021 - 2024</h1>
</div>

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