ウィンドウを塗りつぶす要素を中央に維持するにはどうすればよいですか？

Question

ウィンドウのサイズを変更したときにキャンバスを常に中央に維持するには（スクロールバーが表示されるときを含む）this demoキャンバス要素は、常にウィンドウを埋める必要があります。

left、margin-leftなど（負の値を含む）などの設定で再生しようとしましたが、役に立たなくなりました。

Answer 1

overflow: hidden;を試しましたか？

JSFiddle

body { 
    overflow: hidden; 
} 

Answer 2

あなたは キャンバスのような何かを行うことができます{ 位置：固定; トップ：-500px;

window.addEventListener("resize", function() { 
    canvas.width = window.innerWidth; 
    canvas.width = window.innerHeight; 
}); 

キャンバスページ全体を埋めるように、余白を削除したい場合は、あなたに次のCSSを追加してみてください：リスナーのサイズを変更するウィンドウを追加してみてください、キャンバスページにサイズを変更させるために }

Answer 3

ページ：

body {  
    margin: 0 !important; 
    padding: 0 !important; 
} 

Answer 4

これはあなたが望むものですか？

これは、キャンバスのサイズをウィンドウの最小サイズ（幅または高さ）に変更するコードのリファクタリングバージョンです。また、キャンバスのdisplayをblockに設定し、margin: 0 autoを使用して中央に配置します。

ここにはdemoです。

UPDATE 1私は、キャンバスをウィンドウの高さと幅の間の最大寸法にサイズ変更するコードを変更する場所を示すコメントをリファクタリングしました。

UPDATE 2キャンバスに合わせるようにリファクタリングしました。そのため、十字線は、幅と高さを正確なウィンドウに設定することによって常に中央に配置されます。

また、パディングと余白をすべて削除するようにCSSを更新しました。

キャンバスはwindow.onresizeに再描画されます。多くのあいた後

var canvas = document.createElement('canvas'); 
 
document.body.appendChild(canvas); 
 

 
function setSize() { 
 
    var w = window.innerWidth; 
 
    var h = window.innerHeight; 
 
    //var size = (h > w) ? h : w; //<<<< resize to largest between height and width 
 
    //var size = (h < w) ? h : w; //<<<< resize to smallest between height and width 
 
    //canvas.width = size; 
 
    //canvas.height = size; 
 
    canvas.width = w; \t //<<<< exact resizing to width 
 
    canvas.height = h; \t //<<<< exact resizing to height 
 
} 
 

 
function draw() { 
 
    var context = canvas.getContext('2d'); 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 
    context.strokeStyle = 'red'; 
 
    context.moveTo(canvas.width/2, 0); 
 
    context.lineTo(canvas.width/2, canvas.height); 
 
    context.moveTo(0, canvas.height/2); 
 
    context.lineTo(canvas.width, canvas.height/2); 
 
    context.stroke(); 
 
} 
 

 
setSize(); 
 
draw(); 
 

 
window.onresize = function(e) { 
 
    setSize(); 
 
    draw(); 
 
};

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
canvas { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

Answer 5

、私はそれを考え出したと思います。 working demo（fullscreen version）です。自動的に（非可視部分を含む）全体のスクロール可能な領域の中央にウィンドウをスクロール

function render() { 
    requestAnimationFrame(render); 
    window.scrollTo(
     document.documentElement.scrollWidth/2 - window.innerWidth/2, 
     document.documentElement.scrollHeight/2 - window.innerHeight/2 
    ); 
} 
requestAnimationFrame(render); 

マイナス表示領域自体の半分の大きさ：私は、次のループを使用して終了しました。

皆様のおかげです。