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

Question

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

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

我曾尝试过JsFiddle一些东西，但无法使其工作。

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

Answer 1

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

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

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

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

Answer 2

您是否尝试过这样的 CSS：

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