How to center an image with flexbox?

Question

css

How to center an image with flexbox?
That's what I wanted

<div class="about">
        <div class="abou__item">
          <span>about</span>
          <img src="img/about1.jpg" alt="">
        </div>
        <div class="abou__item">
          <img src="img/about2.jpg" alt="">
          <span>about</span>
        </div>
        <div class="abou__item">
          <span>about</span>
          <img src="img/about3.jpg" alt="">
        </div>
        <div class="abou__item">
          <span>about</span>
          <img src="img/about4.jpg" alt="">
        </div>
    </div>

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 1

<span>about</span>make it fixed width + add a second on the other side and make it opacity: 0

<div class="abou__item">
  <span>about</span>
  <img src="img/about2.jpg" alt="">
  <span style="opacity: 0;">about</span>
</div>

Then this block will always be the same width, with the picture in the middle

Answer 2

justify-content: center; // центируем по оси х
align-items: center; // центируем по оси у