这是我的 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head><link href="test.css" rel="stylesheet"></head>
<body>
<div class="outer">
<div class="inner">
<img src="test.png">
</div>
</div>
</body>
</html>
这是 CSS:
.outer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
.inner {
width: auto;
margin: auto;
}
.inner > img {
width: auto;
max-width: 100%;
}
这是我在 Bootstrap 的 modal.js 中用于在单击缩略图后显示图像的代码的简化。
我想要的是以响应方式使图像以视口(viewport)为中心 - 也就是说，图像以其真实尺寸显示，除非视口(viewport)小于其中一个尺寸，在这种情况下，图像应相应地调整大小。
outer div 往往具有视口(viewport)的精确尺寸 - 这很好用。
图像被赋予 width: auto; max-width: 100%; 对视口(viewport)的宽度非常敏感，但对视口(viewport)的高度没有反应。添加 max-height: 100%; 没有任何作用。
不幸的是，inner div 紧贴视口(viewport)的左侧，除非指定了特定的宽度。
如果我将 display: table 添加到 .inner，则 div 居中，但不再响应视口(viewport)宽度的变化。
那么，我如何让 inner div 居中并响应视口(viewport)的宽度和高度，而不会裁剪或改变图像的纵横比或将其拉伸(stretch)超出图片的原始尺寸？
仅使用 CSS 和 HTML(以及 Bootstrap)是不可能的，还是需要一些自定义 JS？我对 JS 的了解还不够多，无法自信地自己编写代码，这就是为什么我希望有一些可爱的 CSS 技巧可以允许这种以视口(viewport)大小为条件的矛盾行为。
标记 Twitter 的 Bootstrap，因为我将在 Bootstrap 上下文中使用它，因此欢迎任何使用 Bootstraps JS 插件的解决方案。
编辑:为了更清楚，我需要将 inner 居中，而不仅仅是 inner 中的图像。
最佳答案
像这样更改代码
.outer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
text-align:center;
}
关于html - 如何将未指定宽度的 div 居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24176531/