中心图像大于包含div

Question

这就是我所拥有的：

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;
}
.thumbnail img {
    height: 600px;
     width: auto;
}

图像的宽度可以是任何大小，也可以大于容器div。我该如何居中呢？

Answer 1

使用Flex简单，作为您的问题，假设图像可用大小（没有CSS设置）

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;  
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div style="width: 300px;">
<div class="thumbnail"><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /></div>
</div>

Answer 2

尝试添加这个

.thumbnail img {
    height: 600px;
     width: auto;
     display:block;
     margin: 0 auto;
}