如何让Bootstrap4 Modal-title相对于模态框整体完全居中？

我完全懂你的困扰——默认的Bootstrap 4模态框标题所谓的“居中”，其实只是在关闭按钮（X）左边的区域里居中，根本不是相对于整个模态框的宽度。这确实挺烦人的，毕竟很多时候我们就是要标题在模态框正中间显示。

问题根源 #

Bootstrap 4的.modal-header默认是flex布局，而且.modal-title自带flex-grow: 1属性，这意味着标题会占据模态框头部除了关闭按钮之外的所有空间。这时候你给标题加text-center，只会让它在这个“被压缩”的空间里居中，自然达不到整个模态框宽度居中的效果。

两种可行的解决方案 #

方案一：绝对定位实现精准居中

通过把模态框头部设为相对定位，让标题绝对定位到头部的水平中心，同时把关闭按钮也定位到右上角，互不干扰：

.modal-header {
  position: relative; /* 作为绝对定位元素的父容器 */
}

.modal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现完美居中 */
}

.modal-header .close {
  position: absolute;
  right: 1rem; /* 保持默认的右侧间距 */
}

方案二：修改flex布局+单独定位关闭按钮

这种方式更简洁，直接调整模态框头部的flex对齐方式，然后把关闭按钮移出正常文档流：

.modal-header {
  justify-content: center; /* 让头部内的元素整体水平居中 */
}

.modal-header .close {
  position: absolute;
  right: 1rem;
}

完整示例代码 #

把上面的CSS和下面的HTML结合起来，就能看到效果了：

<!-- 模态框结构 -->
<div class="modal fade" id="centeredTitleModal" tabindex="-1" role="dialog" aria-labelledby="centeredTitleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="centeredTitleModalLabel">完全居中的模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这里是模态框的内容区域...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

这两种方案都能让标题相对于整个模态框的宽度完美居中，而且不会影响关闭按钮的点击功能，你可以根据自己的喜好选择其中一种。

内容的提问来源于stack exchange，提问作者Tommy Hügel