html - 如何垂直对齐div的每个元素？

Question

我正在尝试将 div 的每个元素垂直居中对齐，但我做不到。我尝试过垂直对齐，但它不起作用。出了什么问题？

我希望每个元素都像这样居中

.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>

标签： htmlcss

Answer 1

当您将 .banner 制作为 flexbox 时，它会对齐其直接子代而不是子代（.banner-text）内的子代，因此，对齐属性应用于 .banner-text 而不是 .banner-text 内的内容可能会对您有所帮助，使 div(banner-text) 也成为 flexbox，然后使用属性 justify-content 水平对齐和 align-items 垂直对齐它。试试这个：

.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>