在頁面中間水平和垂直居中div

Question

我正在嘗試在頁面中間獲得如下所示的頁面布局，其中水平和垂直居中div的頁眉和頁腳固定在頁面的頂部和底部

這在除ie6和ie7之外的所有瀏覽器中都很好用。

誰能幫我解決這個問題？ 我是服務器端開發人員，並且是前端的新手。 我做了一些搜索，但是找不到解決方案。

感謝您的幫助。

Answer 1

使用CSS垂直居中可能會很痛苦。 看看Dead Center 。 它需要一個額外的容器“水平”來知道垂直中心在哪里，不幸的是，您必須知道要居中的內容的尺寸，以便可以偏移它。

像這樣...

 body { margin: 0px } #horizon { text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #content { margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px; visibility: visible }

 <body> <div id="horizon"> <div id="content"> content you want centered </div> </div> </body>

Answer 2

 .centered { background-color: red; width:50px; height:50px; position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); }

 <div class="centered">

Answer 3

這在Chrome 38上不再能正常工作。嘗試在上方加載死點網站並調整瀏覽器的大小-請查看文字中的變形。

在頁面中間水平和垂直居中div

問題描述

3 個解決方案

解決方案1
5 2011-12-30 14:50:51

解決方案2
1

解決方案3
0 2014-10-14 18:06:02

在頁面中間水平和垂直居中div

問題描述

3 個解決方案

解決方案1 5 2011-12-30 14:50:51

解決方案2 1

解決方案3 0 2014-10-14 18:06:02

解決方案1
5 2011-12-30 14:50:51

解決方案2
1

解決方案3
0 2014-10-14 18:06:02