$('#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> <div id="tip">←虛線可拖曳縮放</div>
#margin-center { background: #CCCCFF; } #margin-center > div { background: #FFFFAA; display: block; margin: auto; border: 3px solid #FFFFFF; } #text-center { background: #FFCCCC; text-align: center; } #text-center > div { display: inline-block; background: #AAFFFF; border: 3px solid #FFFFFF; } #position-center { background: #CCFFCC; position: relative; height: 200px; } #position-center > div { display: block; background: #FFAAFF; position: absolute; margin: auto; left: 0; right: 0; border: 3px solid #FFFFFF; } #content > div > div { width: 100px; height: 100px; } #content > div > h4 { display: block; font-size: 14px; text-align: left; margin-top: 0; } #content > div { padding: 20px 0; } #content { font-size: 0; display: inline-block; max-width: 400px; width: 100%; height: auto; border: 1px dotted gray; } #tip { display: inline-block; vertical-align: top; }