Seguinte, sempre procurei uma solução pra esse tipo de problema, mas nunca encontrei. Eu tenho os seguintes códigos.
<style>
.allboxframes {
margin: 0 auto;
max-width: 100%;
}
.box-frames {
margin: 0 auto;
float: left;
padding: 5px;
width: 250px;
height: 250px;
}
.frames{
width: 240px;
height: 180px;
margin: 0 auto;
}
</style>
<div class="welcome-banner">
<div class="banner-content">
<div class="allboxframes">
<div class="box-frames">
<div class="frames">
<span id='wrapper'> <iframe id='scaled-frame' scrolling="no" src=''></iframe></span>
</div>
<br />
<center>
<div class="button">
<a href="" target="_blank">Rede LAN</a>
</div>
</center>
</div>
<div class="box-frames">
<div class="frames">
<span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
</div>
<br />
<center>
<div class="button">
<a href="" target="_blank">Rede Segurança</a>
</div>
</center>
</div>
<div class="box-frames">
<div class="frames">
<span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
</div>
<br />
<center>
<div class="button">
<a href="" target="_blank">Rede WAN</a>
</div>
</center>
</div>
<div class="box-frames">
<div class="frames">
<span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
</div>
<br />
<center>
<div class="button">
<a href="" target="_blank">Rede DataCenter</a>
</div>
</center>
</div>
<div class="box-frames">
<div class="frames">
<span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
</div>

 <br />
<center>
<div class="button">
<a href="" target="_blank">Rede Convenios</a>
</div>
</center>
</div>
</div>
</div>
</div>
O allboxframes é a caixa onde a div está inserida, e box-frames são as divs que eu centralizei, e se alinha esquerda pelo float, porém ao diminuir a resolução da tela, os frames continuam alinhados a esquerda, deixando assim, um espaço a direita. Gostaria de saber se existe uma forma de deixar eles centralizados na pagina um ao lado do outro, como está agora, mas ao diminuir a pagina, fiquem, por exemplo, três alinhados ao centro em cima, e dois alinhados ao centro em baixo. Se possível.
Eu vi algo sobre display: flex; mas não sei como utilizar.