DIV matrix with centered DIV

The number of columns adjusts to the width of the screen.

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 
{    
  display:flex; 
  flex-wrap: wrap; 
  justify-content: center;
  box-sizing: border-box;
  border: 3px solid blue; 
  overflow:auto;
  margin:0;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
.div_centr_ext 
{ 
  box-sizing: border-box;
  height: 300px;
  min-width:300px;
  position: relative;
  border: 1px solid lightgray; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);        
  float:left;
  margin:9px;
  border-radius:10px;
}
.div_centr_ext h2 
{ 
  font-size:24px;
  text-align:center;
  margin:3px;
}
.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: 680px) 
{
  .div_centr_ext {width:95%;}
}
@media only screen and (min-width: 680px) 
{
  .div_centr_ext {width:47%;}
}
@media only screen and (min-width: 992px) 
{
  .div_centr_ext {width:30%;}
}

@media only screen and (min-width: 1440px) 
{
  .div_centr_ext {width:23%;}
}
@media only screen and (min-width: 1634px) 
{
  .div_centr_ext {width:16%;}
}