Css 垂直和水平定心

可能重复：

我有一个canvas元素，我希望它位于页面的正中央，垂直和水平

我是一名程序员，对CSS不太了解。有人能帮我把画布垂直和水平居中吗

以下是我当前的CSS代码：

/* Set up canvas style */
#canvas {
  font-family: 'pixel';
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid black;
  cursor: none;
  outline: none;
}

---

它已经水平居中，但不是垂直居中，提前谢谢

这应该可以做到：

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

顶部和左侧的边距必须为元素高度和宽度的负一半

如果您不知道宽度和高度，并且需要使用javascript计算，那么同样的原则也适用。只需获得宽度/高度，将其除以一半，然后按照与上述示例相同的方式将值设置为边距

---

希望有帮助：）

我不知道这是否会有帮助，但我写了这个jQuery插件可能会有所帮助。我也知道这个脚本需要调整。它会在需要时调整页面

(function($){
    $.fn.verticalCenter = function(){
        var element = this;

        $(element).ready(function(){
            changeCss();

            $(window).bind("resize", function(){
                changeCss();
            });

            function changeCss(){
                var elementHeight = element.height();
                var windowHeight = $(window).height();

                if(windowHeight > elementHeight)
                {
                    $(element).css({
                        "position" : 'absolute',
                        "top" : (windowHeight/2 - elementHeight/2) + "px",
                        "left" : 0 + "px",
                        'width' : '100%'
                    });
                }
            };
        });

    };
})(jQuery);


$("#canvas").verticalCenter();

---

精炼代码+演示 请在“完整页面”模式下查看此演示

（函数（$）{
$.fn.verticalCenter=功能（观察者）{
var$el=此；
变量$watcher=$（watcher）；
$el.ready（函数（）{
_changeCss（$el，$watcher）；
$watcher.bind（“resize”，function（））{
_changeCss（$el，$watcher）；
});
});
};
函数_changeCss（$self，$container）{
var w=$self.width（）；
var h=$self.height（）；
var dw=$container.width（）；
var dh=$container.height（）；
如果（dh>h）{
$self.css({
位置：'绝对'，
顶部：（dh/2-h/2）+“px”，
左：（dw/2-w/2）+“px”，
宽度：w
});
}
}
})（jQuery）；
$（“画布”）。垂直中心（窗口）；
$（函数（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
drawSmile（ctx，0.9，'黄色'，'黑色'，0.75）；
});
函数drawSmile（ctx、刻度、颜色1、颜色2、微笑百分比）{
变量x=0，y=0；
变量半径=画布宽度/2*比例；
var眼半径=半径*0.12；
var eyeXOffset=半径*0.4；
var eyeYOffset=半径*0.33；
ctx.save（）；
ctx.translate（canvas.width/2，canvas.height/2）；
ctx.beginPath（）；//绘制面
弧（x，y，半径，0，2*Math.PI，false）；
ctx.fillStyle=color1；
ctx.fill（）；
ctx.线宽=半径*0.05；
ctx.strokeStyle=color2；
ctx.stroke（）；
ctx.beginPath（）；//画眼睛
ctx.arc（x-眼偏移，y-眼偏移，眼半径，0,2*Math.PI，假）；
ctx.arc（x+eyeXOffset，y-eyeyyoffset，eyeRadius，0,2*Math.PI，false）；
ctx.fillStyle=color2；
ctx.fill（）；
ctx.beginPath（）；//画嘴巴
ctx.弧（0，0，半径*0.67，Math.PI*（1-smilePercent），Math.PI*smilePercent，false）；
ctx.stroke（）；
ctx.restore（）；
}

#画布{
边框：3个虚线#AAA；
}

请您提供更多的代码（HTML），没有通用的方法。如果您知道项目和父项的高度，您可以计算。我认为CSS是失败的。即使CSS3也不能处理简单的布局要求。如果元素高度不变，这真的很容易。（这是一个问题！）我是纯css做的，解决方案不依赖于块的大小，只有在事先知道元素高度的情况下才有效。如果直到渲染时，你别无选择，只能使用JavaScript获取高度，然后设置边距的内联。@Adam，我让它成为可能，但你没有-正如我指出的，只有在你事先知道元素的高度时，你才能这样做。你也设定了你的100px，因此，知道它。