JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
   <h1>Come usare flexbox per centrare elementi.</h1>
  <article class="article">
     <img class="img1" src="http://freevectorlogo.net/wp-content/uploads/2012/06/wordpress-logo-vector-01.png" alt="">
     <p class="p1"> Testo </p>
     <a href="#"> Leggi di più > </a>
  </article>
  
  <article class="article">
     <img class="img1" src="http://freevectorlogo.net/wp-content/uploads/2012/06/wordpress-logo-vector-01.png" alt="">
     <p class="p1"> Testo </p>
     <a href="#"> Leggi di più > </a>
  </article>
  
  <article class="article">
     <img class="img1" src="http://freevectorlogo.net/wp-content/uploads/2012/06/wordpress-logo-vector-01.png" alt="">
     <p class="p1"> Testo </p>
     <a href="#"> Leggi di più > </a>
  </article>
</section>

CSS

/* Per far si che scali correttamente */
img {
  width: 100%;
  height: auto;
}

h1 {
  flex: 1 0 100%;
  text-align: center;
}

/* Usiamo flexbox + centriamo usando un max-width in combinazione con margin: 0 auto; */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 80%;
  margin: 0 auto;
}

/* 33% = 100 / 3 per avere 3 colonne */ 
.container .article {
  flex-basis: 33%;
  width: 33%;
  text-align: center;
}