使用CSS在IE9中垂直居中元素

我試圖使用下面的代碼通過使用CSS將<div>居中在另一<div>的中心，但它僅適用於Chrome，而不適用於IE9和Firefox 13.0.1。以下是我的HTML文件：使用CSS在IE9中垂直居中元素

<!DOCTYPE HTML> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="test.css"> 
    <title>test</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="center">abc</div> 
    </div> 
</body> 
</html>

以下是我的CSS文件：

.container{ 
    position: relative; 
    border: 1px solid black; 
    width: 600px; 
    height: 400px; 
    position: relative; 
} 

.center { 
    border: 1px solid blue; 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    margin-left: 50%; 
    margin-top: 50%; 
    top: -100px; 
    left: -150px; 
}

我發現了另外一個簡單的問題。如果我在上面的CSS文件中刪除代碼top: -100px，則內部div的底部邊框應該完全覆蓋外部div底部邊框，因爲內部div的高度爲200px，外部div的高度爲400px，然後設置內部div到margin-top: 50%。兩個divs的底部邊界應該在一起，但它們不是。我發現margin-top:50%取決於外部div的寬度。如果寬度較長，則margin-top: 50%將使內部股價進一步下跌。這太奇怪了。有誰知道原因？

來源

2012-07-13 Joey

使用邊距百分比時，百分比總是相對於包含元素的寬度（source）。

交換你的margin-top爲top和margin-left爲left，它應該很好地工作：

.container{ 
    position: relative; 
    border: 1px solid black; 
    width: 600px; 
    height: 400px; 
} 

.center { 
    border: 1px solid blue; 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -150px; 
}

http://jsfiddle.net/rcnWy/1/

來源

2012-07-13 21:38:27

您還可以通過消除下面的'的位置都縮短聲明：絕對的;'和添加' margin：100px 150px;'。 – Kyle 2012-07-13 21:56:19

這是一個很好的觀點。我認爲這是一個人爲的例子，真正的版本將使用一個非固定尺寸的容器。但是，如果容器具有固定的尺寸，那麼您絕對可以簡化。 – 2012-07-13 22:32:20

你的方法很好。我的容器實際上不是固定的大小。我認爲我只是盲目的，因爲我的錯誤有點愚蠢。我把這些放在錯誤的地方。感謝您的幫助。 – Joey 2012-07-13 23:38:44

使用CSS在IE9中垂直居中元素

回答

相關問題