javascript - 对于未知尺寸的堆叠子 div，如何使一切居中？

Question

我已使 div 正确堆叠，但子项未居中。具体来说，我正在使用 Canvas 和另一个用作输入层的 div。我在 Canvas 顶部有一个输入层并占据了整个屏幕，而我希望 Canvas 居中(输入层也可以居中但它占据了整个屏幕所以应该不会有太大变化。它也会可能值得一提的是，我不知道高度和宽度的原因是因为这是一个响应式网站。只要最终居中，直接的 javascript jquery、css3、html5 将是有效的解决方案。

长话短说:div 容器 -> (div 输入 && Canvas ) parent ->( child && child )使未知高度和宽度的 Canvas 以页面为中心

编辑:我希望蓝色框( Canvas )在页面上居中。 http://jsfiddle.net/t2fL9/4/让我放置 jsfiddle 链接的代码块？

Answer 1

像这样更新你的 JS:

var $wrapper = $('#wrapper'),
    $canvas = $('#canvas'), 
    canvas_width = $canvas.width(),
    canvas_height = $canvas.height(),
    $window = $(window);

$window.resize(function(){
    $wrapper.css({
        width: $window.innerWidth(),
        height: $window.innerHeight()
    });

    $canvas.css({
        marginLeft: -canvas_width/2,
        marginTop: -canvas_height/2
    })    
}).trigger('resize');

DEMO