title: WooCommerce Single Product Image not getting centered
body: <p>I have a three column layout and one of them is like -</p>
  <pre><code>&lt;div class=&quot;column one-second product_image_wrapper&quot;&gt;
    
    &lt;div class=&quot;images&quot;&gt;
      
        &lt;div class=&quot;image_frame scale-with-grid&quot; ontouchstart=&quot;this.classList.toggle('hover');&quot;&gt;
          &lt;div class=&quot;image_wrapper&quot;&gt;
            &lt;a href=&quot;#&quot; itemprop=&quot;image&quot; class=&quot;woocommerce-main-image zoom&quot; title=&quot;Sumanji Kamphy&quot; data-rel=&quot;prettyPhoto&quot;&gt;
              &lt;div class=&quot;mask&quot;&gt;
              &lt;/div&gt;
              &lt;img width=&quot;250&quot; height=&quot;250&quot; src=&quot;#&quot; class=&quot;scale-with-grid wp-post-image&quot; alt=&quot;Sumanji Kamphy&quot; title=&quot;Sumanji Kamphy&quot;&gt;
            &lt;/a&gt;
            &lt;div class=&quot;image_links&quot;&gt;
              &lt;a href=&quot;#&quot; itemprop=&quot;image&quot; class=&quot;woocommerce-main-image zoom&quot; title=&quot;Sumanji Kamphy&quot;&gt;
                &lt;i class=&quot;icon-search&quot;&gt;
                &lt;/i&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to center this image both vertically and horizontally currently it looks something like this -</p>
  <p><a href="https://i.stack.imgur.com/M1DKB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M1DKB.png" alt="image layout" /></a></p>
  <p>Can someone tell how to do this ?</p>