Question

我尝试使用以下代码通过CSS将<div>置于另一个<div>内，但它仅适用于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文件：

.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%。两个div的底边应该在一起，但它们不是。

我还发现margin-top:50%取决于外部div的宽度。如果宽度较长，则margin-top: 50%会使内部div进一步下降。太奇怪了。有谁知道原因？

Answer 1

对边距使用百分比时，百分比始终相对于包含元素的宽度（source）。

交换margin-top的{{1}}和top的{{1}}，它应该可以正常工作：

margin-left

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

使用CSS在IE9中垂直居中

1 个答案: