WordPress CSS图像偏离中心的问题

Question

我在Wordpress上建立了一个商店。在我的商店中，为产品导入图像时，它们不会在背景中居中。 使用Chrome检查下方的蓝色突出显示图像所在的位置。它应该是在黑色背景下。

这是图像的CSS。

.st_th_item_image {
    width: 100%;
    overflow: hidden;       
    background-color: black;
    position: relative;
    z-index: 10;
    height: 385px; 
    transition: height 0.3s ease-out;
}

有趣的是，在实际图片的<img>标签::before之前，Chrome检查中，我可以右键单击它，Chrome会显示“滚动到视图”选项。单击可将图像放在需要的位置，在黑色背景上。

我看不出是什么造成了这种情况。我非常肯定这不是Wordpress中的选项/设置。这也不是图像的大小问题。这是一个CSS问题。但我不知道到底是什么。

更新

我花时间从Chrome检查产品和样式表中的匹配css中取出代码。

.st_th_item_image {
    width: 100%;
    overflow: hidden;       
    background-color: black;
    position: relative;
    z-index: 10;
    height: 385px;
    clear:both 
    transition: height 0.3s ease-out;
}   
.item:hover .st_th_item_image  {
    height: 335px;
}
.st_th_item_image a {
    display: block;
    text-align: center;

}
.st_th_item_image i.icon_salelabel {
    position: absolute;
    top: 0;
    left: 0;
}
.st_th_item_image i.icon_hotlabel {
    position: absolute;
    top: 0;
    left: 0;
}
.st_th_item_image i.icon_newlabel {
    position: absolute;
    top: 0;
    left: 0;
}







<div class="st_th_item_image">
    <a href="http://example.com/product/link" class="woocommerce-LoopProduct-link">
        <div class="rating-input">
            <span class="glyphicon glyphicon-star-empty" data-value="1"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="2"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="3"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="4"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="5"></span>
            <input class="rating" data-max="5" value="" data-productid="668" data-min="1" name="rating" type="hidden">
        </div>
    </a>
    <a href="http://example.com/product/link">
        <img width="270" height="203" src="http://example.com/image.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" title="title" srcset="http://example.com/image.jpg 270w, http://example.com/image.jpg 300w, http://example.com/image.jpg 500w" sizes="(max-width: 270px) 100vw, 270px">
    </a>
</div>