How to center multiple divs even after window size changes - html

Question

I'm trying to get the divs always be centered even after one div drops to the bottom if window size is adjusted. So basically if there are 5 divs and one drops to the bottom after window size reached a certain point, so the remaining 4 divs would still be centered. If possible it would be better if the one dropped wouldn't center but be on the left.
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
}
.item {
width: 300px;
height: 300px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
How the result should look

Answer 1

Use CSS Grid Layout
CSS Grid was like made for this purpose. In the following snippet, I have removed some of your lines and resized the children. But you need to pay attention to the three lines of code added to .item-holder.
I have also made the holder resizable, so you can play with it.
.item-holder {
width: 95%;
height: 80%;
background-color: teal;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
/* Following code makes the element resizable*/
resize: horizontal;
overflow: auto;
}
.item {
width: 100px;
height: 50px;
background-color: black;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
Further Reading
See CSS Grid Layout on MDN
Learn CSS Grid Layout on freeCodeCamp.org
See CSS Grid Layout: Create flexible layouts using auto-fill on freeCodeCamp.org

Answer 2

You can make the .item-holder a flexbox
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
display: flex;
flex-flow: row wrap;
}
.item {
width: 100px;
height: 100px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>