HTMLの縦方向の整列

divを垂直にセンタリングするための最も簡単な方法は何ですか？クロスブラウザですか？HTMLの縦方向の整列

HTML：

<body> 
    <div id="mainContainer"> 
     <header> 
      blah 
      </header><!-- End header --> 
     </div><!-- End mainContainer --> 

</body>

はCSS：

#mainContainer{ 
    width:960px; 
    margin:60px auto; 
    background:#FFF; 
    border:1px solid black; 
} 
header{ 
    padding:30px 0 30px 0; 
    background:red; 
    margin:0 auto; 
}

出典

2012-04-27 Jess McKenzie

ねえねえ、私は、次の取得

https://stackoverflow.com/a/10010055/1312610

http://jsfiddle.net/ERuX4/1/

出典

2012-04-27 05:14:56 ShibinRagh

ねえ。 - 200は何を表していますか？私は600px幅のボックスとそのオフセンターを持っています –

投稿コードhttp://jsfiddle.netをお願いします。私たちは問題を解決することができます – ShibinRagh

http://jsfiddle.net/e2bmC/＆http： //cl.ly/060H2r3R2S3a3U0j021Z –

あなたは、あなたが負のマージンが半分ある

position:absolute 
top:50%; 
left:50%; 
width:200px; 
height:200px; 
margin-left:-100px; 
margin-top:-100px;

を使用することができ、高さを指定することができる場合幅と丈のGHTそれぞれ

出典

2012-04-27 04:47:41

簡単な方法を使用してください：http://cl.ly/1p3k1A2l033a1g1p3Z1J –

は左のようになります。50％はしませんでした取る。あなたがそれを中心にしたい親要素は、相対位置が宣言されている必要がありますが、 'body'を基準にしてセンタリングしているだけの場合は、その必要はありません。コードを表示できる場所に投稿すると、おそらく何が起きているかを伝えることができます。 http://jsfiddle.net/ –

答えて

関連する問題