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

标签 html css image centering

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

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

我试过JsFiddle一些东西,但不能让它发挥作用。

我怎样才能让它发挥作用?是否可以?有人可以在 JsFiddle 中展示一个操作示例吗?谢谢!

最佳答案

你可以使用固定位置,甚至不需要包装 div(如果你愿意,你可以添加它):

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

边距是图像大小的一半(你提到它是已知的)。

这是 fiddle :http://jsfiddle.net/B68c3/2/

关于html - 根据当前窗口大小将图像垂直和水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15748189/

相关文章:

c# - ImageList 上的 32 位图像

javascript - 将 HTML DIV 保存为图像并弹出“另存为”窗口

php - 通过ajax分割输出值,

html - 如何更流畅地动画化元素内背景渐变的旋转?

html - 当遇到兄弟跨度时使文本换行

CSS3 转换比例和容器溢出

javascript - 使用 svg 图像作为按钮 - 但不将它们直接包含在 HTML 中

html - 将鼠标悬停在第二个元素上时,如何更改上一个元素的背景?

css - 图像 div 设置为高度 : 100% but not expanding to 100% - trying to avoid 100vh

android - 如何在现有 View 上叠加图标图像