CSS实现多个div居中且不重叠的解决方法

我需要在图片中央（水平和垂直方向）依次放置标题、线条和副标题，从上到下排列，线条位于两段文本之间，但它们始终重叠。尝试过将div改为span、外层div设display:block内层设inline-block等方法都无效；用flexbox时，遇到必须给所有元素设相同类名才能生效的问题，这不可行，因为它们各自有不同属性。

原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);
}

核心思路是将标题、线条、副标题包裹在一个统一的容器内，让这个容器整体在banner中水平垂直居中，容器内部用flex布局垂直排列元素，既保留各元素独立样式，又避免重叠。

修改后的HTML代码：

<div class="banner"> 
    <div class="banner-content">
        <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>
</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');
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: white;
}

/* 统一容器实现整体居中 */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 控制元素间距，可按需调整 */
}

.titulo-banner {
    font-family: Martel;
    font-size: calc(15px + 2vw);
}

.linha-banner {
    height: 4px;
    width: 15vw;
    background: #ffc700;
}

.texto-banner {
    font-family: Martel;
    font-size: calc(15px + 0.5vw);
    text-align: center;
}

修改说明 #

• 新增.banner-content容器，通过position: absolute+transform: translate(-50%, -50%)实现整体在banner中水平垂直居中
• 容器内用flex-direction: column让元素垂直排列，align-items: center保证每个元素水平居中
• 移除三个子元素各自的绝对定位样式，彻底解决重叠问题
• 用gap属性统一控制元素间距，比单独设置margin更简洁

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