在页面上显示一个居中（垂直和水平）图像（未知尺寸）

Question

如何在不知道尺寸的情况下垂直和水平居中单个图像？

此外，如果图像大于视口，则应重新调整大小以适合

有没有办法在不使用Javascript的情况下完成所有这些？

Answer 1

这是我之前做过的一个页面：）

http://kt80.net/

这是整个代码：

body{background:#e5e7e6 url(egyptrabbit.jpg) no-repeat fixed 50% 50%}

编辑：啊，只是看到调整大小适合部分。您可以在背景图像上使用CSS3属性“包含”以确保它始终位于窗口内，但如果窗口较大，这将拉伸它。

Answer 2

如果包含的元素属于display: table-cell，则只能垂直对齐，因此请对其进行设置，然后您可以使用vertical-align和text-align。这是一个例子：

​<div style="width: 500px; height: 300px; border: 1px red solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="https://www.google.com/images/srpr/logo3w.png">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

示例小提琴：http://jsfiddle.net/8Aq5Y/

如果您不更改display，或display设置为block或inline，则无法使用。

要确保它适合包含元素，只需使用max-width和max-height：

<div style="width: 100px; height: 100px; border: 1px red solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="https://www.google.com/images/srpr/logo3w.png" style="max-width: 100px; max-height: 100px;">
</div>​

http://jsfiddle.net/8Aq5Y/3/