css - trying to center html divs on a page -

i trying center div tags on page (content inside irrelevant). able , page looks great, it's hacked arbitrary margins everywhere things align correctly. can point me simple .css solution pull of page structure looks attached image?

you can use plain css without flex or grid layout. here example using bootstrap:

<div class="container">   <div class="block row"></div>   <div class="clearfix row row2">     <div class="col-sm-6 col"><div class="block"></div></div>     <div class="col-sm-6 col"><div class="block"></div></div>   </div>   <div class="block row"></div>   <div class="clearfix row row4">     <div class="col-sm-4 col"><div class="block"></div></div>     <div class="col-sm-4 col"><div class="block"></div></div>     <div class="col-sm-4 col"><div class="block"></div></div>   </div> </div>  .block {   background: blue;   height: 30px; } .row {   margin-bottom: 20px; } .row .col:first-child {   padding-left: 0; } .row .col:last-child {   padding-right: 0; } .row4 .col {   padding: 0 30px; } 

here jsfiddle.