2

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

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

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

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

4

2 回答 2

2 
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。只有使用干净的标记和没有 JS 的 CSS 才能做到这一点。

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

编辑 2：为了将来打样，无前缀版本是

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
于 2012-03-28T21:59:06.480 回答
0

这是一篇关于居中的好文章：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/

于 2012-03-28T21:34:51.877 回答