图片水平居中、垂直居中，如何操作？

Question

下面分别是htm和CSS，想让图片垂直居中、水平居中，谢谢！

<div class="detail-thumbnail-inner">
            <ul class="detail-thumbnail-body">
                {loop $arrCoverList $k $v}
                <li class="detail-thumbnail-item">
                    <a href="{$v}" rel="detail-thumbnail-group">
                        <img src="{$v}" onerror='$(this).attr("src","tpl/default/img/shop/shop_default_big.jpg")'
                    </a>
                </li>
                {/loop}     
            </ul>
</div>

.detail-thumbnail { background: #fafafa; border: 1px solid #eeeeee; overflow: hidden; margin-bottom: -1px; position: relative; z-index: 1; }
.detail-thumbnail:hover .detail-thumbnail-pv { display: block; }
.detail-thumbnail:hover .detail-thumbnail-nx { display: block; }
.detail-thumbnail-body { width: 100%; position: relative; height: 280px;  vertical-align: middle;}
.detail-thumbnail-inner { overflow: hidden; margin: 10px;}
.detail-thumbnail-item { float: left; display:flex;flex-direction:column;　justify-content:center;}
.detail-thumbnail-item img { display: table-cell; vertical-align: middle;max-width: 380px; max-height: 280px; display: block; }
.detail-thumbnail-pv { display: none; padding: 0; position: absolute; z-index: 1; left: 10px; top: 10px; bottom: 10px; line-height: 280px; text-align: center; width: 25px; }
.detail-thumbnail-nx { display: none; padding: 0; position: absolute; z-index: 1; right: 10px; top: 10px; bottom: 10px; line-height: 280px; text-align: center; width: 25px; }

Answer 1

不知道你是不是要这个效果

.detail-thumbnail-item {display:flex;height: 280px;align-items: center;justify-content: center;width: 280px;border: solid 1px #999;box-sizing: border-box;}
.detail-thumbnail-item img { max-width: 380px; max-height: 280px; display: block; object-fit: cover;}

加边框是为了看效果，可以删了
如果解决了问题，请点一下采纳，谢谢