Html 如何将未指定宽度的div居中？_Html_Css_Twitter Bootstrap

Html 如何将未指定宽度的div居中？

html css twitter-bootstrap

Html 如何将未指定宽度的div居中？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,以下是我的HTML代码： <!DOCTYPE html> <html lang="en"> <head><link href="test.css" rel="stylesheet"></head> <body> <div class="outer"> <div class="inner"> <img src=

以下是我的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>

这是我在Bootstrap的modal.js中使用的代码的简化，用于在单击缩略图后显示图像

我想要的是图像以一种响应的方式居中于视口，也就是说，除非视口小于其中一个尺寸，否则图像将以真实尺寸显示，在这种情况下，图像应相应地调整大小

outer

div往往具有视口的精确尺寸，这一点很好

图像显示为

width:auto；最大宽度：100%对视口的宽度非常敏感，但对视口的高度不敏感。添加<代码>最大高度：100%什么都不做
不幸的是，inner
div站在视口的左侧，除非指定了特定的宽度

如果将display:table
添加到.internal
，则div将居中，但不再响应视口宽度的更改
那么，如何使内部div居中，并对视口的宽度和高度做出响应，而不会裁剪或改变图像的纵横比，或将其拉伸到图像的原始尺寸之外
仅仅使用CSS和HTML（以及引导）是不可能的，还是需要一些定制的JS？我不知道足够多的JS来自信地自己编写代码，这就是为什么我希望有一些可爱的CSS技巧，允许这种视区大小为条件的矛盾行为
标记Twitter的引导，因为我将在引导上下文中使用它，所以任何使用引导JS插件的解决方案都是受欢迎的
编辑：为了更清楚，我需要将内部
居中，而不仅仅是内部
中的图像
这样更改代码
.outer {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        text-align:center;
    }

尝试文本对齐：居中；每件被认为是文本的东西你能提供一个你所拥有的吗？可能是基于宽度的一般响应的重复。问题是它将internal
扩展到视口的大小，而不是将internal
移动到中心。这会导致其他问题，因为内部div需要环绕/粘贴到图像。请检查上述代码是否正常工作。我为Images添加了img响应类，正如我上面所说的，它只是将图像居中于可见div内，而不是将div本身居中。这就是我要寻找的结果：（只是当视口很大时它的样子，不幸的是display:table破坏了所有响应）。希望这有助于解释我所说的div..modal对话框宽度默认值600px居中的意思
.outer {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        text-align:center;
    }