Question

如何在父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; }

Answer 1

将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

Answer 2

您需要将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;
}

就是这样！

Answer 3

尝试将图像边距属性设为margin:0 auto，如果父div具有宽度，则图像将按父项居中

Answer 4

我会将此添加到.box img。

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

您可能需要调整每张图片，或者可能不是因为尺寸。

Answer 5

如果有人在这里寻找解决方案，请使用 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;
}

父div中的中心图像元素

5 个答案:

更新