Simple DIV matrix with centered DIV (Flex)

The boxes are symmetrically left-right aligned

by Ovi Stof

HTML

<div class="div_centr">
  <div class="div_centr_ext">
    <h2>Test</h2>
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
  <div class="div_centr_ext">
    <div class="div_centr_int">I am vertically and horizontally centered.</div>
  </div>
</div>

CSS

.div_centr{border:1px solid green;overflow:auto;width:max-content;max-width:98%;display:flex; flex-wrap: wrap; justify-content: center;margin: 0 auto;}
.div_centr_ext {display:inline-table;position: relative;border:1px solid darkgray; /*width:max-content;*/ float:left;width:300px;min-height:200px;margin:5px; padding:5px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .4);
border-radius:10px;
}
.div_centr_int {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        /*------------------*/
        width:80%;
        height: auto;
        border: 3px solid red; 
        font-size:20px;
      }
@media only screen and (max-width: 600px) 
{
	.div_centr, .div_centr_ext {display:block;width:100%;}
}