środkowanie 4 div wewnątrz głównego diva

[MGR111]

Witam,
Mam mały problem z wycentrowaniem 4 divów w jednym dużym divie. Wygląda to mniej więcej tak:
Główny DIV posiada własności ( width: 100%, max-width: 1080px ) , posiada on w środku 4 divy które mają szerokość 230px, i każdy z nich zawiera obrazek.

Chciałbym umieścić tak te 4 divy w środku, aby strona była responsywna, tzn: wraz z zmiejszaniem okna przeglądarki może zmniejszać się odległość między divami (Ewentalnie troche rozmiar divów ( z 230px do min 150px),),
i jeśli np. 4ty div się nie mieści mógłby wskoczyć na dół ale znów wyśrodkowany, później ze zmniejszaniem okna przeglądarki jeśli 2 divy sie nie mieszczą to 2 wskakują na dół i się środkują.

Przedstawiam przykładowe zdjęcie jak mogłby to wyglądać.

Jeśli chodzi o moje próby, próbowałem każdemy przypisać position: absolute, oraz odpowiednio parametry left. Jednak efekt jest taki że elementy nachodzą na siebie i nie wskakują na dół (i oczywiście się nie centrują)

Prosze o każdą pomoc,  góry serdecznie dziekuje!
 

[abcseo.pl]

sprawdź to

https://webkod.pl/kurs-css/lekcje/dzial-4/responsywny-uklad-elementow-html

[Sagitario]

 

Wystarczy display:inline-block;

<style>
body,html{width:100%;height:100%}
.container{width:100%;height:100%;text-align: center;}
.container div{width:230px;height:230px;display:inline-block;background:#ddd;}
</style>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

 

[Splatt28]

A ja polecam skorzystać z frameworków css'a --> Bootstrap

[pyzdera]

A ja polecam Flexbox

https://www.w3schools.com/css/css3_flexbox.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/