CSSを使ってブラウザの中心にdivを置く方法は？

のdivを縦横両方向に配置する方法 CSSのみを使用していますか？CSSを使ってブラウザの中心にdivを置く方法は？

IE7でも正しく動作することを確認してください。

すべてが失敗した場合は、JavaScriptを使用できますが、最後の選択肢です。

2009-06-24 Anonymous

HTML：

<div id="something">... content ...</div>

CSS：

#something { 
    position: absolute; 
    height: 200px; 
    width: 400px; 
    margin: -100px 0 0 -200px; 
    top: 50%; 
    left: 50%; 
}

出典

2009-06-24 19:48:38 James

なぜここにマイナスのマージンがありますか？ありがとう！ –

divのサイズをオフセットするためです。左上と左上を50％に設定すると、要素の上部と左がページの中央になり、要素自体ではありません。負のマージンは、要素のサイズのちょうど半分であり、要素自体がその上辺と左辺だけでなく中央に配置されるように、差を構成します。 – tj111

Ew。なぜあなたは絶対にポジションをとる必要がありますか？それは設計された方法で気が箱のモデルを使用してください。 –

margin: auto;

出典

2009-06-24 19:59:08 Rony

私はマージンを使用します：0 auto; – kta

最も簡単な解決策は、単に自動マージンを使用して、あなたのdivに一定の幅と高さを与えることです。これはIE7、FF、オペラ、サファリ、とChromeで動作します：

HTML：

<body> 
    <div class="centered">...</div> 
</body>

CSS：

body { width: 100%; height: 100%; margin: 0px; padding: 0px; } 

.centered 
{ 
    margin: auto; 
    width: 400px; 
    height: 200px; 
}

EDIT！申し訳ありませんが、私はちょうどあなたが垂直に言ったことに気付きました...トップとボトムのデフォルトの "自動"マージンはゼロです...これは水平になるようにします。垂直方向と水平方向の位置を決める唯一の解決策は、受け入れられた答えのようなマイナスのマージンで動き回ることです。また、次のあなたのdivを設定することができ

出典

2009-06-24 20:01:03 jrista

：

#something {width: 400px; margin: auto;}

その設定では、divが付きセット、およびマージンを持っていますし、どちらかの側には、自動的にブラウザのとに応じて設定します。

出典

2009-06-24 20:08:32 Chris

<html> 
<head> 
<style> 
* 
{ 
    margin:0; 
    padding:0; 
} 

html, body 
{ 
    height:100%; 
} 

#distance 
{ 
    width:1px; 
    height:50%; 
    margin-bottom:-300px; 
    float:left; 
} 


#something 
{ 
    position:relative; 
    margin:0 auto; 
    text-align:left; 
    clear:left; 
    width:800px; 
    min-height:600px; 
    height:auto; 
    border: solid 1px #993333; 
    z-index: 0; 
} 

/* for Internet Explorer */ 
* html #something{ 
height: 600px; 
} 
</style> 

</head> 
<body> 

<div id="distance"></div> 

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

</html>

FF2-3、IE6-7、Operaで動作確認済みです。

出典

2009-06-24 20:10:33 Rado

は、古いブラウザでは、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

出典

2013-07-10 09:07:48 user2567780

はこれを利用して、この

#center_div 
{ 
     margin: auto; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
}

出典

2014-03-10 11:34:12 M98

を試みるHTMLドキュメントの上にこの行を追加する必要があります。

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }

出典

2016-04-07 14:47:57

.center { 
    margin: auto; 
    margin-top: 15vh; 
}

を万一トリックを行う

出典

2016-11-23 08:17:34

CSSを使ってブラウザの中心にdivを置く方法は？

答えて

関連する問題