3

次のコードを使用して、 CSS を使用し<div>て別の内部を中央に配置しようとしまし<div>たが、IE9 と Firefox 13.0.1 ではなく、Chrome でのみ機能します。以下は私の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 の高さが 200px で外側の div の高さが 400px であるため、内側の div の下の境界線が外側の div の下の境界線を正確に覆うことになり、内側の div をmargin-top: 50%. 両方の div の下の境界線は一緒にある必要がありますが、そうではありません。

margin-top:50%また、外側のdivの幅に依存することもわかりました。幅が長い場合、margin-top: 50%内側の div がさらに下に移動します。とても奇妙です。誰かが理由を知っていますか？

4

1 に答える 1

2

マージンにパーセンテージを使用する場合、パーセンテージは常に含まれている要素（ソース）の幅を基準にしています。

とを交換するmargin-topと、正常に機能するはずです。topmargin-leftleft

.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 に答える