WooCommerce Single Product Image not getting centered - html

Question

I have a three column layout and one of them is like -
<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 to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?

Answer 1

Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}