固定サイズのボディ（またはdiv）を常にページの中央に置く方法（垂直方向でも）

私は1024x768ボディを常にページの中央に置くようにしています同じ間隔で、左 - 右）しかし、私はそれを行うには問題があります。固定サイズのボディ（またはdiv）を常にページの中央に置く方法（垂直方向でも）

私は768

の半分である-384pxで（絶対に）体が、しかし、この方法は私に問題を与え、その後、私は位置付け、50％でトップからの間隔のトリックを使用：あなたの場合ウィンドウが768ピクセルより小さい場合、スクロールバーが表示されますが、スクロールバーが表示されます（スクロールすることはできません）。

どうすれば解決できますか？

編集1：ここ はいくつかのコードである：

JS.Fiddle（フルスクリーン）：http://jsfiddle.net/FireDragonDoL/TGjN8/6/embedded/result/
JS.Fiddle（正常）：CAN http://jsfiddle.net/FireDragonDoL/TGjN8/6/

HTMLコード簡単なhtmlウェブページに印刷する：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Test</title> 
<style> 
/** 
*  Change the basic background color of the page 
*/ 
html 
{ 
    background-color: blue; 
} 

/** 
*  Set the body as a 1024 x 768 rectangle in center of the screen 
*/ 
body 
{ 
    background-color:     red; 
    font-family:  TradeGothic, sans-serif; 
    margin-left:      -512px; 
    margin-top:      -384px; 
    position:      absolute; 
    height:        768px; 
    width:        1024px; 
    left:         50%; 
    top:         50%; 
} 
</style> 
</head> 
<body> 
some text 
</body> 
</html>

出典

2012-02-03 Fire-Dragon-DoL

これを追加します。

html { 
    position: relative; 
    min-width: 1024px; 
    min-height: 768px; 
    height: 100%; 
}

http://jsfiddle.net/thirtydot/TGjN8/9/（フルスクリーンを：http://jsfiddle.net/thirtydot/TGjN8/9/show/）

出典

2012-02-03 02:34:20 thirtydot

すごい迫力、おかげでたくさん！なぜそれが働くのか聞いてもよろしいですか？私は100％の高さを完全に理解している間に、ちょっとした幅でポイントを正確に取得しません（しかし、それはデフォルトであると思いました）。私は50k評判の人からこれに答えを期待していない...ありがとう！ –

追加：位置：相対;ウィンドウに相対的なビューポートを作るのですか？（0; 0） –

あなたは大歓迎です。 'position：relative'は絶対配置された' body'を 'html'にアンカーし、' min- * 'は' html'がスクロールを保証する 'body'より小さくなるのを防ぎます。あ、はい"。 – thirtydot

固定サイズのボディ（またはdiv）を常にページの中央に置く方法（垂直方向でも）

答えて

関連する問題