Tekst na górze i na dole div’a z backgroundem

Witam

Czy ktoś może mi pomóc jak ogarnąć html’owo i css’owo jak chcemy żeby na divie z backgroundem który ma okresloną wysokośc dać tekst na samej gorze i na samym dole centralnie na środku?

Czy może to flex’em ogarnąć i każdy tekst będzie oddzielnym div’em i dać justify-content: space-between?

<div id="div_z_tlem">
  <div id="div_gora">góra</div>
  <div id="div_dol">dół</div>
</div>

#div_z_tlem {
  position:relative;
  width:200px;
  height:300px;
  border:1px solid red;
}

#div_gora {
  position:absolute;
  top:10px;
  left:50%;
  transform: translate(-50%, 0);
  border:1px solid green;
}

#div_dol {
  position:absolute;
  bottom:10px;
  left:50%;
  transform: translate(-50%, 0);  
  border:1px solid blue;
}

@Freja Draco: dzięki, translator w tym przypadku co daje?

LynxBings napisał(a):

@Freja Draco: dzięki, translator w tym przypadku co daje?

Przesuwa element w lewo o odległość równą połowie jego szerokości.

@Freja Draco: No okej, ale przecież mamy left: 50% to nie wystarczające?

LynxBings napisał(a):

@Freja Draco: No okej, ale przecież mamy left: 50% to nie wystarczające?

Left:50% mówi nam, że DIV z tekstem, ma się zaczynać w połowie szerokości kontenera/rodzica,
transform:translate(-50%, 0) każe go przesunąć w lewo o połowę szerokości elementu/dziecka.