如何在瀏覽器視口中間像div一樣居中div

我有一個搜索網站需要將搜索欄和徽標在索引頁中垂直和水平居中放置爲頁面上唯一的項目。如何在瀏覽器視口中間像div一樣居中div

什麼是執行這一

2011-05-11 Farouk Alhassan

這已被問* sooo *很多次。 Google搜索「垂直中心div」和「水平中心div」。 – Blender 2011-05-11 18:16:29

既然你已經承認要像谷歌那樣做，那麼爲什麼不全力以赴，看看他們是如何做到的呢？ – 2011-05-11 18:16:45

我不瞭解你，但是當我閱讀網頁時，我從頂部開始，而不是在中間...... [Google **不要**垂直居中他們的主頁]（https：//img.skitch。 COM/20110511-nkrwtn8kyhwmg7kpy3whra9er6.jpg）。他們有一個工具欄，一個標誌，搜索框，一個小間隙，然後是頁腳。 – Quentin 2011-05-11 18:18:41

對CSS的唯一途徑看看這個小提琴。 http://jsfiddle.net/jeffrod/nFthS/

它要求中間框的寬度和高度是已知的。它將框的左上角定位在中間，然後使用邊距將其移回，以使框的中心位於頁面的中心。

來源

2011-05-11 18:26:07 Jeff

的最佳和最有效的途徑這裏有一個簡單的方法來做到這一點，但它不會工作在IE6，不支持位置：固定的。如果您需要IE6支持，請使用position：absolute，但確保頁面內容不超過視口的高度。

#box { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width:100%; 
    height: 100%; 
} 

#box table { 
    height: 100%; 
} 

#box td { 
    vertical-align: middle; 
    text-align: center; 
}

和HTML：

<div id="box"><table><tr><td> 
YOUR HTML CODE HERE 
</td></tr></table></div>

寫着...

你可能不應該這樣做，雖然。如果您只是簡單地看一下，避免讓內容難以抵禦頁面頂部，那麼最好在頂部添加50-100像素的填充。

來源

2011-05-11 18:19:23

<style> 
div.center { 
    position: fixed; 
    width: 320px; 
    height: 240px; 
    top: 50%; 
    left: 50%; 
    margin-top: -120px; 
    margin-left: -160px; 
} 
</style> 

<div class="center"><!-- search bar --></div>

，但我不知道這是不是最好的辦法

來源

2011-05-11 18:22:26

如何在瀏覽器視口中間像div一樣居中div

回答

相關問題