when u are making .banner a flexbox then it aligns its direct child not the child inside the child(.banner-text), due to this the align properties are applied to .banner-text not to the content inside .banner-text this might help you, make the div(banner-text) a flexbox too, and then use property justify-content to horizontally align and align-items to vertically align it. Try out this:

.banner-text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

<section class="banner" id="banner">
  <div class="banner-text">
    <h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
    <h3>Técnico Analista Programador.</h3>
    <a href="#about" class="btn">Sobre Mí</a>
  </div>
</section>

i think you can achieve this with simpler approach like this:

.banner{
text-align:center;

}
.banner h2, .bannerh3{
 line-height:28px;
}

please check this https://jsfiddle.net/2djyza47/

I’m trying to align center vertically each element of a div but I can’t do it. I have tried with vertical align but it isn’t working. What is going wrong?

I want each element centered like this

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="banner" id="banner">
  <div class="banner-text">
    <h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
    <h3>Técnico Analista Programador.</h3>
    <a href="#about" class="btn">Sobre Mí</a>
  </div>
</section>