html - WooCommerce Single Product Image not getting centered -

i have 3 column layout , 1 of them -

<div class="column one-second product_image_wrapper">    <div class="images">        <div class="image_frame scale-with-grid" ontouchstart="this.classlist.toggle('hover');">         <div class="image_wrapper">           <a href="#" itemprop="image" class="woocommerce-main-image zoom" title="sumanji kamphy" data-rel="prettyphoto">             <div class="mask">             </div>             <img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="sumanji kamphy" title="sumanji kamphy">           </a>           <div class="image_links">             <a href="#" itemprop="image" class="woocommerce-main-image zoom" title="sumanji kamphy">               <i class="icon-search">               </i>             </a>           </div>         </div>       </div>     </div> </div> 

i want center image both vertically , horizontally looks -

can tell how ?

assuming want put in center relative div class image_frame , following code work.

.image_frame{   position:relative;//makes outer div relative, can use if want other div }   .image_frame img{   position:absolute;   top:50%;   left:50%;//brings edge of image exact center both horizontally , vertically   margin-top:-125px;   margin-left:-125px;//now pushing half of images width , height in case 250px -125px pushing image exact center. }