在 div 块中居中 img（光滑滑块）

Question

我有一个关于 div 中心 img 的问题。我阅读并做了有关中心对齐问题的所有答案。 display: flex 帮助了我，但它在做我的 slick-slider 跳跃。 3 屏幕看起来不错，下一个跳转没有幻灯片 1 秒，下一个好。你可以在我的 site 中看到它。我如何在没有 flex 和 position: absolute 的情况下将我的 img 集中在 div 中？或者如果没有跳转滑块我该怎么做？我希望伙计们，你们能理解我的英语，对于这个简单的问题感到抱歉...

    div {
      display: flex!important;
      justify-content: center;
      align-items: center;
      outline: none;
      height: 100%;
      max-height: 100%;
      img{
        width: 50%;
      }
    }

    <div class="partners multiple-items">
         <div>
            <img src="img/logo-adata.png">
         </div>
    </div>

Answer 1

尝试使用

display: table-cell;
vertical-align: middle;

.partners
{
  width: 500px;
  height: 500px;
  border: 1px #aaa solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.item{
  width: 300px;
  margin: auto;
}

<div class="partners multiple-items">
     <div class="item">
        <img src="http://via.placeholder.com/300x300">
     </div>
</div>

Answer 2

div.partners div{
height:500px;width:500px;text-align:center; vertical-align:middle;display:table-cell;
}

Answer 3

您需要 img 标签吗？

实现此目的的一种方法是使用 background-image 而不是 img. 简单地删除 img 标签，然后您可以 center 图像为

.img__wrapper {
  background-image: url(img/news-img-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

这是如何完成的使用 img 标签

.img__wrapper {
  height: 100%;
  position: relative;
}

.img__wrapper > img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

Answer 4

div {
  display: flex!important;
  align-items: center;
  outline: none;
  height: 100%;
  max-height: 100%;
  img{
    margin: 0 auto;
    width: auto;
    max-height: 65%;
  }
}

它解决了我的问题&滑块不跳

在 div 块中居中 img（光滑滑块）

Center img in the div block (slick-slider)

html

css

slick.js