如何用CSS实现Div与图片的居中对齐并隐藏溢出内容？

我折腾出了一套方案，能完美实现Div容器和内部图片的水平+垂直居中，还能自动隐藏超出容器范围的图片部分，直接上代码：

<style>
.center {
  height: 100%;
}
.center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: auto;
  overflow: hidden;
}
.overlay {
  position: relative;
  max-width: 100%;
  z-index: 9999999;
}
.image {
  position: absolute;
}
</style>

<div class="center">
  <div class="center-center">
    <div class="overlay">
      <img class="image" src="你的图片地址">
    </div>
  </div>
</div>

关键细节拆解： #

• .center：作为最外层容器，设置height: 100%来占满父元素的高度，给后续的居中布局打下基础。
• .center-center：这是实现居中的核心！先用position: absolute+top: 50%+left: 50%把元素定位到父容器的中心点，再通过transform: translate(-50%, -50%)反向偏移自身的一半尺寸，这样不管元素本身多大，都能精准居中；另外overflow: hidden就是用来裁剪超出这个容器的图片部分的。
• .overlay：设置position: relative作为图片的定位参考，max-width: 100%保证容器不会撑破视口，高z-index能让这个容器始终显示在页面其他元素的上方。
• .image：用position: absolute让图片脱离文档流，这样就能跟着外层的居中设置，完美对齐到容器的中心点。

这样配置后，不管你的图片尺寸是大是小，都会在容器内居中显示，超出的部分会自动被隐藏掉，效果很稳定～

内容的提问来源于stack exchange，提问作者Abigail A.