Bootstrap 5.3.5中如何垂直居中<h1>标题文本？

你的问题源于层级元素未继承高度以及样式类重复应用导致布局冲突，可以通过以下步骤修复：

1. 修正CSS样式冲突 #

你同时给父容器和子标题元素应用了header-title类，导致flex布局的作用层级混乱。拆分样式类，明确各自作用：

.header {
  height: 100px;
}
/* 父容器的flex居中样式 */
.header-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 73, 101);
}
/* 标题文本的基础样式 */
.header-text {
  margin: 0; /* 移除h1默认上下外边距，避免居中偏移 */
}

2. 利用Bootstrap内置类确保高度继承 #

Bootstrap的.row和.col-*默认不会自动继承父元素高度，需添加.h-100类让它们占满.header的100px高度，配合自定义类实现垂直居中：

<div class="header">
  <div class="row h-100">
    <div class="col-md-1 d-flex align-items-center">
      <a href="{{url_for('home.index')}}">
        <img src="{{ url_for('static', filename='images/logo.png')}}" alt="logo" width="100" height="100"/>
      </a>
    </div>
    <div class="col-md-11 h-100 header-center-container">
        <h1 class="header-text">{{ title }}</h1>
    </div>
  </div>
</div>

关键改动说明 #

• 给.row添加.h-100，让它完全继承.header的100px高度
• 给左侧logo所在列添加.d-flex align-items-center，让logo也垂直居中（保持整体视觉统一）
• 拆分原header-title类，避免父子元素样式冲突
• 移除<h1>默认外边距，防止居中位置偏移

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