使用邊距自動垂直和水平居中div一個div

我試圖在使用margin auto的窗口中心顯示一個塊。使用邊距自動垂直和水平居中div一個div

我的代碼是

<div class="centre-element"> This box is coming at the center of the window. </div>

CSS

.centre-element{ 
    width: 200px; 
    height: 100px; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
}

這適用於所有我除了在IE7測試的瀏覽器。這有幫助嗎？

感謝任何幫助。

來源

2013-02-08 Rupam Datta

可能[CSS：當沒有固定大小的div已知時垂直對齊div]（ http://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-fixed-size-of-the-div-is-known） – NGLN

.centre-element{ 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    padding: auto;  
}

來源

2013-02-08 10:13:36 aishazafar

'padding：auto' ??? – Morpheus

謝謝Morpheus。我通常使用上面的代碼來在窗口中心（水平）帶一個div。但是你的評論讓我的概念更加清楚了保證金和填充。 – aishazafar

你不能居中div垂直使用margin: auto，但你可以試試這個：

.centre-element { 
    top: 50%; 
    margin-top: -50px; /* height/2 */ 
}

編輯：

下面是一個例子： http://jsfiddle.net/ZD432/

來源

2013-02-08 10:14:11

你快到了。左邊做同樣的事情：'左：50％; margin-left：-100px'。 +1無論如何:) – Morpheus

@Morpheus - 無需使用「left」作爲「margin：0 auto」做同樣的事情。會做的伎倆。 –

@比利護城如果'保證金：0汽車;'**將被添加** ** margin-top：-50px' – Morpheus

使用邊距自動垂直和水平居中div一個div

回答

相關問題