css - How to center multiple divs without overlapping? - html

Question

I want to enter a title, a line and a subtitle in the center of an image (horizontally and vertically), in this order from top to bottom, with the line between the two texts, but they keep overlapping. I've tried some answers from other questions, such as changing from div to span and setting display:block in the outter div and display:inline-block in the inner divs, for example, but nothing works.
With flexbox, I ran into the issue of needing to name all of their classes the same for it to work, which is not viable because they have different properties.
Appreciate the help!
Here's the code and the fiddle:
https://jsfiddle.net/u8asjmy7/
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);
}

Answer 1

Hmm, I think you could still use flexbox without having to name all the existing classes, does this accomplish what you need?
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;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.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);
}
<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>
If you must use position: absolute, you should do it only on the container of those texts. Let me know if you need a better solution