Question

我已经正确堆叠了div，但是孩子们没有居中。具体来说，我正在使用画布和另一个作为输入图层的div。我在画布顶部有输入图层，占据全屏幕，同时我希望画布居中（输入图层也可以居中，但它占据整个屏幕，因此不会有太大变化。它也会可能很高兴提到我不知道高度和宽度的原因是因为这是一个响应式网站。直接javascript jquery，css3，html5将是有效的解决方案，只要它集中在最后。

tldr： div容器 - ＆gt; （div输入＆amp;＆amp;画布）父母 - ＆gt; （儿童与儿童）使未知高度和宽度的画布以页面

为中心

编辑：我希望蓝色框（画布）在页面上居中。 http://jsfiddle.net/t2fL9/4/ code block to let me put jsfiddle link?

Answer 1

这应该为你做。以canvas为例。

CSS

#canvas{
position: absolute;
top:50%;
left:50%;
}

使用Javascript：

var canvas = document.getElementById('canvas'),
canWidth = canvas.width,
canHeight = canvas.height;

canvas.style.marginLeft = canWidth/2*-1;+"px"
canvas.style.marginTop = canHeight/2*-1+"px";

小提琴的例子 http://jsfiddle.net/t2fL9/7/

Answer 2

如果你只能支持IE9 +，你可以使用CSS3转换来实现这个目标：

position:absolute;
top: 50%; 
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

对于这个IMO非常有趣的技巧，可以归结为：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

更新了小提琴：http://jsfiddle.net/t2fL9/5/

调整小提琴的大小：http://jsfiddle.net/t2fL9/11/

请注意，完成居中所需的javascript数量明显少于接受的答案。

Answer 3

像这样更新你的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

对于未知尺寸的堆积儿童div，如何使一切都集中在一起？

3 个答案: