如何在 Bootstrap 5 中水平与垂直居中元素-html教程-PHP中文网

如何在 Bootstrap 5 中水平与垂直居中 <p> 元素元素 " />

本文详解在 Bootstrap 5 中实现标签水平居中、垂直居中及两者结合的多种可靠方法，涵盖响应式文本对齐、Flex 布局组合技巧，并提供可直接运行的代码示例。

本文详解在 bootstrap 5 中实现 `

` 标签水平居中、垂直居中及两者结合的多种可靠方法，涵盖响应式文本对齐、flex 布局组合技巧，并提供可直接运行的代码示例。

在 Bootstrap 5 中，居中

元素无需自定义 CSS，官方工具类已提供简洁、语义清晰的解决方案。核心思路分为两类：水平居中（基于文本对齐）和垂直居中（依赖 Flex 布局），二者可灵活组合。

✅ 水平居中：使用 text-center

最简方式是为

添加 text-center 类，它通过 text-align: center 实现内联级居中，适用于任何包含文本的容器：

<div class="d-flex align-items-center justify-content-center bg-light" style="height: 100px;">
  <p class="text-center mb-0">THIS NEEDS TO BE CENTERED</p>
</div>

⚠️ 注意：text-center 仅影响行内内容（如文字、行内元素）的水平对齐，不控制

自身在父容器中的位置；若父容器未设置宽度或未启用 Flex，单独使用 text-center 可能效果不明显。

✅ 垂直居中：利用 Flex 布局

要实现垂直居中，需将父容器设为 Flex 容器，并配合 align-items-center（交叉轴居中）。若还需水平居中，同时添加 justify-content-center：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<div class="d-flex align-items-center justify-content-center" style="height: 200px; background-color: #f8f9fa;">
  <p class="mb-0">Vertically & horizontally centered</p>
</div>

? 提示：mb-0 用于清除

默认的下边距，避免干扰视觉居中效果。

✅ 水平 + 垂直完全居中（推荐方案）

结合 text-center（确保内部文本居中）与 Flex 居中（控制

在容器中的位置），是最稳健的通用解法：

<!-- 完全居中的标准写法 -->
<div class="d-flex align-items-center justify-content-center" style="height: 150px; background: #e9ecef;">
  <p class="text-center mb-0">THIS NEEDS TO BE CENTERED</p>
</div>

? 针对你原始代码的优化建议

你原结构中嵌套过深且 justify-content-end / align-items-end 会将内容推向右下角。修正如下：

<div class="navbar d-flex flex-grow-1 justify-content-between align-items-center mb-3 d-none d-sm-flex">
  <!-- 使用 text-center + flex 居中组合 -->
  <div class="d-flex align-items-center text-white fw-bold">
    <p class="text-center mb-0 me-2">THIS NEEDS TO BE CENTERED</p>
  </div>
  <a href="#" class="btn btn-gold">Booking!</a>
</div>

✅ 关键改进：

将 justify-content-end 改为 justify-content-between，使左右两部分自然分离；
移除冗余的 d-flex align-items-center justify-content-center 嵌套，直接在
上应用 text-center 并保留外层 align-items-center 实现垂直对齐；
添加 mb-0 消除默认间距，me-2 替代 me-2（Bootstrap 5 语法一致）保持右侧间距。