在父 div 中居中图像元素答案

【问题标题】：Center image element in parent div在父 div 中居中图像元素
【发布时间】：2013-08-28 01:11:33
【问题描述】：

如何在父 div 中设置图像元素的中心？我想这样做，以便图像的中间始终位于他父母的中心。此外，我希望图像始终具有 100% 的高度（注意：我不想拉伸图像宽度）。

<div class="box">
  <img src='featured.jpg' />
</div>

CSS：

.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }

【问题讨论】：

我真的不明白。您说不想拉伸宽度，但图像大小为 640px，父级宽度为 450px。您至少必须将图像宽度（拉伸）减小到 450 像素？

标签： html css image

【解决方案1】：

如果有人在这里寻找解决方案，请使用display: flex。

.box {
   display:flex;
   justify-content: center;
   align-items: center;
   background: green;
   border: 2px solid red;
   height: 100%;
   width: 450px;
   overflow: hidden;   
}
.box img {
  justify-content: center;
  align-items: center;
}

【讨论】：

【解决方案2】：

将text-align: center; CSS 声明添加到父.box 而不是子.box img。

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

这里是Fiddle。

更新

图片下方好像还有5px的空白，属于行高保留字符。要从<img> 等内联元素中删除它，您可以使用vertical-align: bottom：

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo #2

【讨论】：

虽然这在给出的示例中确实有效，但我认为这不是一个很好的通用答案，因为它具有将所有文本和所有图像集中在父级中的副作用分区。一个更好的解决方案是只设置一个特别想要居中的元素的样式，而不影响父元素的全部内容。 img 上的display:block; margin:auto 是一种解决方案，它只将图像居中而不影响父级的更大范围

【解决方案3】：

我会将其添加到 .box img。

.box img { margin-left: -25%; margin-top: -25%; }

您可能需要为每个图像调整这些，或者可能不是由于尺寸。

【讨论】：

在某些情况下可以使用负边距，但在这种情况下绝对不能使用，因为有更好的选择。

【解决方案4】：

尝试将图像边距属性设置为margin:0 auto，如果您的父 div 有宽度，那么图像将按照父级居中

【讨论】：

在这种情况下，正确的做法是给一个 text-align: center;父 div 上的属性

【解决方案5】：

您需要将 text-align: center; 从图像的 CSS 移动到其父 div 的 CSS，因此您的 CSS 如下所示：

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}

就是这样！

【讨论】：

我不知道我做错了什么，但是图像不会在div中居中：jsfiddle.net/Ex5ax/17