html - 不能绝对居中 16 :9 overflow using the usual tricks 的元素

Question

为您准备的 fiddle 挑战!

我使用视口(viewport)单位在我的 Canvas 上保持 16:9 的比例并始终填充屏幕 - 边缘会根据需要进行裁剪。这一切都很好，但我似乎无法将 Canvas 居中:

http://jsfiddle.net/calipoop/vwubocv8/

canvas{
    min-width: 100vw;
    min-height:100vh;
    width:177.78vh;
    height:56.25vw;
}

我尝试了我最喜欢的方法(position=absolute，top/bottom/left/right=0，margin=auto)，它令人惊讶地垂直居中，但不是水平居中。我认为这是因为 Canvas 宽度大于 100%。但据我所知，为了保持 16:9，需要保留值(value)。

我打算尝试 left:50% 负边距，但尺寸是动态的。

有什么想法吗？我知道绝对居中元素已经死了，但我觉得也许我有一个新的案例？

如果没有大量的 css hack 就无法完成，我将不得不求助于 javascript/resize 事件。

Answer 1

这是您要找的吗？

FIDDLE

canvas{
    max-width: 100vw;
    max-height:100vh;
    width:177.78vh;
    height:56.25vw;
}

如果您试图保持16:9 比例并且同时以响应方式填满整个屏幕，这在逻辑上是不可能的。但是，如果您同意在保持其 16:9 并覆盖屏幕的同时裁剪边缘，那么这可能适合您。

FIDDLE

canvas{
    min-width: 100vw;
    min-height:100vh;
    width:177.78vh;
    height:56.25vw;

    margin-left: 50%;
    -webkit-transform: translateX(-50%);

}