Center multiple divs

HTML

<div class="banner"> 
        <div class="titulo-banner"><b>BIG TITLE</b></div>
        <div class="linha-banner"></div>
        <div class="texto-banner"><b>Small<br>subtitle.</b></div>
    </div>

CSS

body, html {
    height: 100%;
    margin: 0;
  }
  
.banner {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(20, 20, 20, 0.90)), url('../images/cp/brian-lundquist.png');
    object-fit: cover;
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
    text-align: center;
    color: white;
}

.titulo-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Martel;
  font-size: calc(15px + 2vw);
}

.linha-banner {
  height: 4px;
  width: 15vw;
  background: #ffc700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.texto-banner {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: Martel;
   font-size: calc(15px + 0.5vw);
}