3

我试图使用以下代码通过 CSS 将 a 居中，但它仅适用于 Chrome，不适用于 IE9 和 Firefox 13.0.1 <div>。<div>以下是我的 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;
}

我发现了另一个更简单的问题。如果我把top: -100px上面的CSS文件中的代码去掉，inner div的下边框应该正好覆盖了outer div的下边框，因为inner div的高度是200px，outer div的高度是400px，然后把inner div设置为margin-top: 50%. 两个 div 的底部边框应该在一起，但它们不是。

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

4

1 回答 1

2

当使用百分比作为边距时，百分比总是相对于包含元素（source）的宽度。

交换你的margin-topfortop和margin-leftfor 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-13T21:38:27.130 回答