使用CSS在屏幕上居中顯示圖像 - 隨機屏幕/圖像尺寸

我必須創建一個網頁，這個問題的目的是在屏幕中心垂直和水平居中的一個圖像。它具有以下要求：使用CSS在屏幕上居中顯示圖像 - 隨機屏幕/圖像尺寸

客戶端的屏幕尺寸是未知的（移動）
的圖像是用戶定義的，並且因此是一個未知的尺寸
圖像必須完全居中的垂直和水平上的所有設備
圖像中心必須通過屏幕旋轉（即從縱向到橫向）

作爲一個有點CSS福利局的堅持，我去了，創造了這個唯一的我知道如何，使用JavaScript來定位內容： http://jsfiddle.net/error454/8YL9a/

我正在尋找一種解決方案，其功能與我的解決方案相同，但使用CSS而不是硬方程式。

2012-03-28 Error 454

什麼是使用純CSS，而不是你的JavaScript的好處？ – MrGrigg 2012-03-28 21:35:47

我所展示的是我真正需要創造的冰山一角。如果我使用JavaScript和一堆魔術計算，我將成爲終身的產品所有者。我更喜歡任何Web開發人員在我不在時能夠維護的東西。 – 2012-03-28 21:41:27

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：適應未來發展的prefixless版本

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

來源

2012-03-28 21:59:06 mddw

靈活的盒子模型在這裏我來了！ – 2012-03-28 22:39:57

這是定心一個很好的文章：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-28 21:34:51 evilpenguin

無法正常工作：http://jsfiddle.net/error454/t8qtn/ – 2012-03-28 21:53:15

更新：您可以使用表格，但它們已被考慮棄用於年齡的佈局... – evilpenguin 2012-03-28 22:13:23

使用CSS在屏幕上居中顯示圖像 - 隨機屏幕/圖像尺寸

回答

相關問題