强制图像始终停留在 div 的中间答案

【问题标题】：Force an image to ALWAYS stay at the middle of a div强制图像始终停留在 div 的中间
【发布时间】：2016-09-04 19:14:28
【问题描述】：

我正在寻找一些方法来强制图像元素始终保持在 div 的中间对齐，即使 div 元素变得太小而无法正确居中图像。这是我想要做的解释：Question.jpg

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

【问题讨论】：

标签： html css image alignment center

【解决方案1】：

你可以这样做，使用显示flex。

div {
  width: 100%;
  height: 500px;
  border: 1px solid gray;
  display: flex;
  align-items: flex-start;
  text-align: center;
}
img {
  align-self: center;
  margin: 0 auto;
}

<div>
  <img src="http://screenshots.en.sftcdn.net/en/scrn/323000/323026/angry-birds-theme-02-100x100.png" alt="">
</div>

【讨论】：

【解决方案2】：

使用以下网格布局和样式：

 style{
    .container{ max-width:800px; margin:0 auto;}

}

@media
only screen and (max-width:600px) {
.mCenter{margin:0 auto;}
.mImage600:{width:100%; height:auto;}
}

<div class=container>
<div class=mCenter>
<img class=mImage600 src 'img.jpg' width=600 >
</div>
<div>

【讨论】：

【解决方案3】：

使用这种居中技巧应该可以满足您的需求：

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

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

【讨论】：

在我收到的所有答案中，您与我想要的差不多！它似乎有效，但我面临一个小问题：图像的尺寸如何？实际上，我需要适用于图像的各个维度（肖像、薪酬、立方体）的东西，你有什么想法吗？
嗯，我想如果你删除div框的高度，然后从img中删除“top：50％”，然后更改“transform：translate（-50％，-50％）”到“transform:translateX(-50%)”，你会得到一个水平居中的图像，并且 div 大小将匹配图像的高度。然后，您可以在图像的顶部和底部添加填充以腾出空间。

【解决方案4】：

Fiddle

img{
    margin: 0 auto;
}

可以帮忙

【讨论】：