使用CSS在屏幕上居中显示图像-随机屏幕/图像尺寸

Centering an image on screen using CSS - Random Screen/Image dimensions

本文关键字：图像 屏幕 随机 显示图 显示 CSS 使用      更新时间：2023-09-26

为了这个问题的目的，我必须创建一个网页，它是一个垂直和水平居中在屏幕中心的单个图像。它有以下要求：

  • 客户端的屏幕大小未知（移动）
  • 图像是用户定义的，因此尺寸未知
  • 图像必须在所有设备上垂直和水平居中
  • 图像居中必须通过屏幕旋转保持（即从纵向到横向）

作为一个CSS新手，我用我所知道的唯一方法创建了这个，使用javascript定位内容：http://jsfiddle.net/error454/8YL9a/

我正在寻找一个功能与我的解决方案相同但使用CSS而不是硬等式的解决方案。

display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

CSS3属性，糟糕的支持：webkit，mozilla。唯一的方法是使用干净的标记和CSS而不使用JS。

编辑1:http://jsfiddle.net/t8qtn/6/

编辑2：为了将来的校对，无前缀版本是

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;

这是一篇关于居中的好文章：http://www.w3.org/Style/Examples/007/center.en.html

应该是这样的：

.vcenter { display:table-cell; vertical-align:middle; }
.hcenter { display:block; margin-left:auto; margin-right:auto; }

然后将这两个类应用于您的图像：

<img class="vcenter hcenter" src="..."/>

更新：您可以简单地使用这样的表http://www.sorinvasilescu.ro/

相关文章：