How to center DIVs as the browser window is scaled - css

Question

jsfiddle: https://jsfiddle.net/hfnmspwa/3/
I have floating DIVs with text in that resize as browser window resized. This is working however I cannot get these text boxes to center in the middle of the page. There is no float center! Please see the jsfiddle for further info - I have put some further notes in the JS quadrant.
.infos_div {
background-color: #FFF;
}
.infos_div::after {
content: "";
clear: both;
display: table;
}
.infos_container_div {
background-color: #9FC;
display: inline-block;
}
.info_div {
display: inline-block;
cursor: pointer;
float: left;
text-align: center;
width: auto;
height: auto;
min-height: 80px;
max-width: 30%;
min-width: 200px;
padding: 10px;
margin: 10px;
z-index: 1;
background-color: #FFF;
white-space: normal;
}
<div class="infos_div">
<div class="infos_container_div">
<div class="info_div">
<strong>Feature 1</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 2</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 3</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 4</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div" o>
<strong>Feature 5</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>SFeature 6</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
</div>
</div>

Answer 1

You could give the parent element center text alignment and remove the float.
So add text-align: center; to .infos_container_div and remove float: left; from .info_div.
https://jsfiddle.net/hfnmspwa/4/

Answer 2

If you take the
float:left;
Off of .info-div they should center.

Answer 3

You can use grids, if you necessarily need the 3 paragraphs to be centered.
* {
margin: 0;
padding: 0;
}
.infos_div {
background-color: #FFF;
}
.infos_div::after {
content: "";
clear: both;
display: table;
}
.infos_container_div {
background-color: #9FC;
display: grid;
grid-template-areas: ". . .";
text-align: center;
grid-gap: 10px;
padding: 10px;
}
.info_div {
display: inline-block;
cursor: pointer;
text-align: center;
width: auto;
height: auto;
padding: 10px;
z-index: 1;
background-color: #FFF;
white-space: normal;
}
<div class="infos_div">
<div class="infos_container_div">
<div class="info_div">
<strong>Feature 1</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 2</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 3</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 4</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div" o>
<strong>Feature 5</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>SFeature 6</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
</div>
</div>