How to center the element that embodied in a zoomable container which have the css style ms-content-zooming

Question

Hi, i use css:ms-content-zooming to let user pinch and zoom the element. the code like:

    <div class="div1">
        <div class="div2">
        </div>
    </div>

        

So, there will be two divs, one white div in a green div.

And the outside Div 's -ms-content-zooming is set to zoom , so the inside Div can be zoomed by pinch.

The problem i face is , when zooming the div inside, it can't be centered, it will move.

How can i center the div inside when zooming?