使用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中垂直居中元素

回答

相关问题