html - centering inline-block elements when flexbox and classic techniques don't work -

in page here: https://irfan.io

i have tried centring smaller circles every-way can think of , either don't centred or centring not responsive-- meaning fails when viewport changed.

they of class .small , children of #main.

i have tried flexbox:

#main{     display:flex;     align-items:center;     justify-content:center; } .small{     display:flex; } 

i have tried giving wrapping .small elements in container , giving fixed width , centring -0.5 of width:

#smallcontainer{     width:500px;     margin-left:-250px;     position:relative;     left:50%; } 

i figured since inline-block elements use text-align:center; on .small element, didn't work.

#small{    text-align:center; } 

i can't seem figure out how centre 3 small circles middle 1 in vertical-middle bigger circle ( .big ), centred using 2nd technique.

does have ideas on how this?

you can try this:

html:

<div id="main">     <div id="smallcontainer">         <div class="small">             text         </div>                 <div class="small">             text         </div>                 <div class="small">             text         </div>            </div> </div> 

css:

#main{     display:flex;     align-items:center;     justify-content:center;     position:relative; } .small{     display:flex;.     text-align:center;     display:inline-block;     width:100px;     height:100px;     border:1px solid black; } #smallcontainer{     margin-left:0 auto;     position:relative; } 

fiddle here

what did simple.. make #main , #smallcontainer position relative, remove left , width #smallcontainer make expand according children, put margin:0 auto; #smallcontainer. way if viewport change you're sure .small div's centered.

edit

i updated fiddle, removed display:inline-block; .small in css.

dont forget mark answer if gives need friend :)