How to move flex block content into center. Css exemple

Simple Grid Layout

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

For block use display:flex, justify-content: center and align-items: center for your block

section {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
font-size: 3em;
}