$('#content').resizable();
<div id="content"> <div id="margin-center"> <h4>For block - <br> margin: auto; </h4> <div></div> <div></div> </div> <div id="text-center"> <h4>For inline block - <br> text-align: center; </h4> <div></div> <div></div> </div> <div id="position-center"> <h4>For absolute positioned block - <br> margin: auto; <br> left: 0;<br> right: 0;</h4> <div></div> </div> </div>
#margin-center { background: #CCCCFF; } #margin-center > div { background: #FFFFAA; border: 3px solid #FFFFFF; display: block; margin: auto; } #text-center { background: #FFCCCC; text-align: center; } #text-center > div { background: #AAFFFF; border: 3px solid #FFFFFF; display: inline-block; } #position-center { background: #CCFFCC; height: 200px; position: relative; } #position-center > div { background: #FFAAFF; border: 3px solid #FFFFFF; display: block; left: 0; margin: auto; position: absolute; right: 0; } #content > div > div { height: 100px; width: 100px; } #content > div > h4 { display: block; font-size: 14px; margin-top: 0; text-align: left; } #content > div { padding: 20px 0; } #content { border: 1px dotted gray; display: inline-block; font-size: 0; height: auto; max-width: 400px; width: 100%; }