1

私はこれを何度もグーグルで検索しましたが、なぜ私のdivが中央に配置されないのか理解できません。

HTML：

<body><div id="mydiv"></div></body>

css

*{
    margin:0; 
    padding:0; 
}           
html,body{height:100%; width:100%;}

#mydiv{ 
            height:50%;
            width:50%;
            background:grey;
            margin:auto;

}

それは水平方向にのみ中央に配置され、垂直方向には中央に配置されません。これが表示されないため、問題が発生します。

4

5 に答える 5

1

うまくいけばあなたのために： http：//jsfiddle.net/Ug3RM/ 

#mydiv{ 
        position:absolute;
        top:50%;
        left:50%;
        height:50%;
        width:50%;
        margin-top:-25%;
        margin-left:-25%;
        background:grey;

 }
于 2013-03-14T00:44:20.407 に答える
1

次のようなものを試してください：

#mydiv { 
    height:50%;
    width:50%;
    background:grey;
    position:absolute;
    top:25%;
    left:25%;
}
于 2013-03-14T00:45:05.467 に答える
1

垂直方向のセンタリングも必要な場合は、デッドセンターのアプローチを参照してください。いくつかの追加<div>のが必要になりますが、役立つはずです。

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

于 2013-03-14T00:38:40.383 に答える
0

垂直方向に揃えるには、次のようにマージンを設定してみてください。

#myDiv{margin:50% auto;}

もちろん、これはあなたの含む要素に依存します。ただし、マークアップが指定したとおりである場合は、中央に垂直に配置されて表示されるはずです...

于 2013-03-14T00:41:41.477 に答える
0

OP、

このフィドルを確認してください。垂直方向と水平方向の両方を中央に配置します。

display:tableanddisplay:table-cellアプローチを使用します。これにより、とのvertical-align: middleペアリングが便利になりますmargin: auto。

それが役に立てば幸い。

于 2013-03-14T00:49:27.010 に答える