margin div 中央寄せ

質問

div内の文字ではなく、div事態をページの中央に寄せたいのですが、
なぜか
div.test{
margin-top:100px;
margin-bottom:100px;
vertical-align: middle;
}
だと中央寄せにならないし、

div.test{
margin-top:100px;
margin-bottom:100px;
margin: 0 auto;
}

だと、
margin-top:100px;
margin-bottom:100px;
が無視されます。

上下の幅を設定し、更にdivを中央に表示するにはどうすればいいですか？

回答No.3

noname#206842 · ベストアンサー

HTMLの記述は、正しく書かれていますか？・・・
ブロックレベルのものを、center表示するには、もう一つ大きなブロックレベル（大きな入れ物）の中に、
記述すればできます。

<div class="naka">
<div class="text">
</div>
</div>

CSSは、下記
.naka{text-align:center;}

お礼

ありがとうございました。

回答No.2

noname#248056

一つ目は、左右の位置指定がありません。
vertical-alignは上下の中央指定なのでmarginの上下指定と被ってます。
これを有効にする場合は、親ボックスを設け、そのdivをtable-cellに指定する必要があります。

二つ目は、marginの上下を二重指定した為に最初の100pxは無視されます。
div.test{
margin: 100px auto;
width:300px;/*任意幅*/
}

BOX幅の指定も忘れずに。
もし、画面全体の中央に表示させたいと言う事でしたら、先の回答者さんの方法が参考になると思います。

お礼

ありがとうございました。

回答No.1

outbrave

divを画面の中央にということでしょうか。

.test {
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background-color: #336;
}

divの縦横サイズは調整してもらうとして、それぞれのサイズの半分をmarginでマイナスします。

お礼

ありがとうございました。