Question

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

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

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

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

Answer 1

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;

Answer 2

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

这样的表格

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

2 个答案: