使用CSS垂直居中IE9中的元素_Css_Internet Explorer 9_Margin_Vertical Alignment

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

css

使用CSS垂直居中IE9中的元素,css,internet-explorer-9,margin,vertical-alignment,Css,Internet Explorer 9,Margin,Vertical Alignment,我试图使用下面的代码通过CSS将一个集中在另一个中，但它只在Chrome中工作，在IE9和Firefox 13.0.1中不起作用。以下是我的HTML文件： <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="test.css"> <title>test</title> </head> <bod

我试图使用下面的代码通过CSS将一个

集中在另一个

中，但它只在Chrome中工作，在IE9和Firefox 13.0.1中不起作用。以下是我的HTML文件：

<!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文件中的代码

top:-100px

，则内部div的下边框应该正好覆盖外部div的下边框，因为内部div的高度是200px，外部div的高度是400px，然后将内部div设置为

margin top:50%

。两个div的底部边框应该在一起，但它们不是

我还发现，

边际顶部：50%

取决于外部div的宽度。如果宽度较长，则

边距顶部：50%

将使内部div进一步下降。太奇怪了。有人知道原因吗？

当使用百分比作为边距时，百分比始终与包含元素的宽度有关（）

将

页边距顶部

替换为

顶部

，将

页边距左侧

替换为

左侧

，应该可以正常工作：

.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;
}

您还可以通过删除以下所有内容来缩短声明

位置：绝对并添加边距：100px 150px。这是一个很好的观点。我假设这是一个人为的例子，真实的版本将使用非固定尺寸的容器。但是，如果容器有固定的尺寸，您肯定可以简化。您的方法很好。我的容器实际上不是固定大小的。我想我只是瞎了眼，因为我的错误有点愚蠢。我把这些放错地方了。谢谢你的帮助。
.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;
}