根据当前窗口大小垂直和水平居中图像答案

【问题标题】：Centering an image vertically and horizontally according to current window size根据当前窗口大小垂直和水平居中图像
【发布时间】：2013-04-02 01:33:15
【问题描述】：

我已阅读与此问题相关的其他 SO 问题，但我找不到我的问题的答案。

我想在宽度和高度等于 100% 的 div 中水平和垂直居中图像。换句话说，如果有人调整浏览器窗口的大小，则无论当前大小如何，图像都应保持在窗口的中心。

我曾尝试JsFiddle 某事，但无法成功。

我怎样才能让它工作？可能吗？有人可以在 JsFiddle 中展示一个操作示例吗？谢谢！

【问题讨论】：

你知道图片尺寸吗？
是的，在 JsFiddle 中是 32 x 32
使用这个作为模板？ wpdfd.com/editorial/thebox/deadcentre4.html

标签： html css image centering

【解决方案1】：

您可以使用固定位置，甚至不需要包装 div（如果您愿意，可以添加它）：

img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

边距是图像大小的一半（您提到它是已知的）。

这是小提琴：http://jsfiddle.net/B68c3/2/

【讨论】：

【解决方案2】：

你试过这样的 CSS：

background:url(your_image.jpg) no-repeat center center;

【讨论】：

可以分享一个JsFiddle中的操作例子吗？
是的，但我不知道窗口大小，你把它设置为 100px 而不是 100%....
@JVerstry div 的大小是否与窗口大小相关？