Bootstrap 5.3.5 center <h1> text vertically

I have the following base.html in my Quart template with bootstrap 5.3.5:

<div class="header">
  <div class="row">
    <div class="col-md-1">
      <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 header-title align-middle">
        <h1 class="header-title">{{ title }}</h1>
    </div>
  </div>
</div>

CSS:

.header {
  height: 100px;
  vertical-align: middle;
}
#header-title {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  color: rgb(0, 73, 101);
}

Currently the <h1> title text stay at the top of the element. How to center the text?

I have fixed the style a little bit to be clear and replaced the ID style with the class style.

.header {
  background-color:rgb(200,50,50);
  height: 100px;
  vertical-align: middle;
}


.header-title {
  background-color:rgb(200,200,200);
  position: relative;
  
  text-align: center;
  
  display: flex;
  justify-content: center;
  align-items: center;

  vertical-align: middle;

  color: rgb(0, 73, 101);
}

<div class="header">
  <div class="row">
    <div class="col-md-1">
      <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 header-title align-middle">
        <h1 class="header-title">{{ title }}</h1>
    </div>
  </div>
</div>