How to keep centering random input image when rotated within div

Question

I'm trying to rotate an image while it is being displayed, I'm having trouble keeping it in the center within a < div > when I rotated to 90 and 270 degree. Here's my code

.cn {
background: url('images/transparent.png') repeat; 
height: 200px;
position: relative;
vertical-align: middle; 
}

.east_largerwidth {
position: absolute;
-webkit-transform-origin: 75px 125px;
-moz-transform-origin: 75px 125px;
-ms-transform-origin: 75px 125px;
-o-transform-origin: 75px 125px;
transform-origin: 75px 125px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
}  

.west_largerwidth {
display:block;
margin:auto;
-webkit-transform-origin: 75px 75px;
-moz-transform-origin: 75px 75px;
-ms-transform-origin: 75px 75px;
-o-transform-origin: 75px 75px;
transform-origin: 75px 75px;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
} 

here's the javascript function that rotates the display image

function rotatefunction() {

    if (document.getElementById("ContentPlaceHolder1_Image1").classList.contains('east_largerwidth')) {

                 img.setAttribute('class', 'north');
                     if (hidderValue > 200) {
                         document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto";
                         document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px";
                     }
} else if ( document.getElementById("ContentPlaceHolder1_Image1").classList.contains('west_largerwidth')) {
             img.setAttribute('class', 'south');
                 if (hidderValue > 200) {
                     document.getElementById("ContentPlaceHolder1_Image1").style.width = "auto";
                     document.getElementById("ContentPlaceHolder1_Image1").style.height = "200px";
                 }
}

the html

<div id="divBackground" class="cn" >
  <asp:Image ID="Image1" runat="server" ImageUrl="" style="height: 200px; max-  height: 200px; max-width: 100%;" class='north'/>
</div>
<div class="fileUpload btn btn-warning">
  <input id="inputFile" runat="server" type="file" name="file" onchange="previewFile()" CssClass="upload" />
</div>
<asp:Button UseSubmitBehavior="false" ID="btnRotate" runat="server" Text="Rotate" class="btn btn-warning" OnClientClick="return rotatefunction();" />

0 and 180 degree rotated

90 and 270 degree rotated

Can anyone please help me on how I will keep the image on the center horizontally when rotated to 90 and 270 degree? Thank you.

Answer 1

 center-block { display: block; margin-left: auto; margin-right: auto; }