How to move the elements in cross axis with align-items in flex?

Question

container in cross axis but align-items didnt work here are html and css code tanks for your answers :)

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

<div class="banner">
  <div class="black">
    <div class="content">
      <h1>شرکت بازرگانی قطعات آسانسور</h1>
      <button>تماس با ما</button>
    </div>
  </div>
</div>

Answer 1

Align-items/justify-items would align the element in the available space.

And since you have flex-flow as column, cross-axis is vertical and you need to use justify-content.

And for justify-content to work, the container's height needs to be more than the children's height.

I have given here a height of 300px as an example. You need to specify some height if you want justify-content to work.

.banner .black .content {
    height: 300px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-color: greenyellow;
}

h1, button {
    background-color: yellow;
}

<div class="banner">
  <div class="black">
    <div class="content">
      <h1>شرکت بازرگانی قطعات آسانسور</h1>
      <button>تماس با ما</button>
    </div>
  </div>
</div>