CSS使div中的任何图像居中

Posted 2023-03-05

【中文标题】CSS使div中的任何图像居中

【英文标题】：CSS center any image in div

【发布时间】：2016-09-25 22:02:12

【问题描述】：

假设我有 div 和 width: 300px 和 height: 200px 我希望div 中的任何图像都水平和垂直居中，无论图像大于还是小于div；

对于较小的图像margin: 0 auto 效果很好，但较高的图像会向右突出并且不居中。

对于更大的图像，这可行：

height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

我找不到这些的任何组合，也没有找到任何解决方案如何完美地居中此图像。

【问题讨论】：

但您仍想滚动查看整个图片或只是“裁剪”视图。

Centering an image within a div的可能重复

【参考方案1】：

将position: absolute 添加到img 和position: relative 到div

.el 
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 50px 150px;

img 
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;

<div class="el">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/50x50/000000/ffffff">
</div>

【参考方案2】：

试试这个

div
  display: flex;
  align-items: center;
  justify-content: center

【讨论】：

...但请注意浏览器兼容性问题caniuse.com/#feat=flexbox

好吧，可能工作，但兼容性说再见。