javascript - After add transform scale, I can't set the section to center -

if don't use javascript listen event of resize. method center div?

the css structure contain 3 state. normal , under 900px, under 550px. when width on 550px. can set section center. when screen under 550px. used scale reduce size , unable set center.

i tried change position fixed/relative, left/ float/transform-origin/translatex/use vw/margin/padding... must use javascript listen window resize , change left property css of section?

my website on http://php-kkhchan.rhcloud.com

css:

    @media screen , (max-width: 900px) {     .box {         width: 520px;         height: 650px;     }      #tabs {          width:520px ; height: 650px;         position: static;         margin: 0 auto;         padding-top: 1em;     }  }  @media screen , (max-width: 550px) {     #tabs, .box {         transform: scale(0.6,0.6);         left: -14%;         position: relative;     } }     

html:

    <section id="tabs">   <article class="c_tab box" id="tab0" style="background: #a9d0f5;">     testing   </article> </section>   

you can take reference below jsfuddle jsfuddle

finally, used javascript handle. following solution. not sure if best solution.

$(window).resize(function(){     if ($(window).width()<=550) {         $('#tabs').trigger('customresize');     } });  $('#tabs').on('customresize',function(){     mywidth=($(window).width() - 545)/2 +'px';     $(this).css('left',mywidth); });