如何在父 Div 中垂直和水平居中放置图像？

在父 div 中居中图像元素

当寻求将图像定位在其父 div 中央时，期望的结果是图像在父级中保持垂直居中，同时保持其固有高度。

解决方案：

要实现此效果，请修改父 .box div，而不是子 .box img div，通过添加 text-align: center; 。此修改确保父 div 内的所有内联元素居中对齐。

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

因此，更新的 CSS 保证图像元素始终位于其父 div 的中心，保持其实际高度.

解决垂直间隙问题：

经过进一步检查，发现居中图像下方出现了 5px 的间隙。此间隙可归因于 等内联元素的行高预留。要消除这种间隙，请使用vertical-align：bottom;应将其添加到图像的 CSS 中。

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

通过执行以下步骤，您可以有效地将图像在父 div 内居中，保持其预期高度，同时消除任何意外的垂直间隙。

以上是如何在父 Div 中垂直和水平居中放置图像？的详细内容。更多信息请关注PHP中文网其他相关文章！