html - 强制图像始终位于 div 的中间

Question

我正在寻找强制图像元素始终与 div 中间对齐的方法，即使当 div 元素变得太小而无法正确居中图像时也是如此。这是我想做的事情的解释:Question.jpg

如果可能，我需要纯 CSS 的解决方案吗？

Answer 1

使用这个居中技巧应该会给你想要的东西:

img {
  position:relative; (or absolute, it depends on your needs)
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

无论容器大小如何，这都会使图像居中。但它不会调整图像的大小。根据那张照片，你似乎不想要那个。