如何将未知大小的图像置于 div 中？答案

【问题标题】：How to center the image of unknown size inside div?如何将未知大小的图像置于 div 中？
【发布时间】：2023-03-17 16:53:01
【问题描述】：

假设我有一个 div 具有以下样式：

#container {
    position: fixed;
    width: 100%;
    height: 100%;
}

我还有一个未知大小的图像（大小可能会有所不同），我想垂直和水平对齐。

最好的方法是什么？

【问题讨论】：

也许你的 CSS 有错字，但我想确保你明白你的类选择器应该以点开头，如 .container { ... }
当然，我知道这一点 :) 我的#container 不是一个类，它是 id。
如果它是一个 id，那么你应该在它前面加上#，就像你在评论中所做的那样。我只是说。

标签： css alignment vertical-alignment

【解决方案1】：

背景图片方法可以使用，背景位置：中心中心，不幸的是你会失去对图片缩放的控制。

您可以按如下方式设置图像：

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

PS。请记住，这将相对于其最近的定位父级居中。

【讨论】：

适用于图像，但不适用于 DIV。似乎需要硬编码的 CSS 宽度/高度来使其居中。请注意，如果您删除样式属性并仅在 div 上保留 HTML 宽度/高度，它将无法居中。 img 标签不行。为什么会出现这种不一致？ jsfiddle.net/L1rk46xy
完美。动态的。

【解决方案2】：

http://zoffix.com/new/absolute-center-random-width-height.html

这是一个相当不错的例子。通常你在现代浏览器中使用 table/vertical-align，在 IE 中使用定位+%s。

【讨论】：

【解决方案3】：

我相信最简单的方法是这样做：

.container img {
    display:block;
    margin:auto;
}

调整 .container 以适合您的 div（不确定您的是类还是 ID）

哦，我没有阅读您的所有问题。

这似乎有效：

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

完整的信用：http://www.brunildo.org/test/img_center.html

【讨论】：

【解决方案4】：

这将垂直和水平居中。

#container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/nfBDT/

【讨论】：

【解决方案5】：

添加以下内容：

前两行垂直居中，最后一行水平居中。

display: table-cell;
vertical-align: middle ;
text-align: center;

更多信息可以在这里找到：http://www.w3.org/Style/Examples/007/center

【讨论】：

【解决方案6】：

最简单的跨浏览器方法是将动态图像设置为#container 上的背景属性：

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>

【讨论】：