Question

你的小提琴挑战！

我正在使用视口单元在我的画布上保持16：9的比例并始终填充屏幕 - 根据需要裁剪边缘。这一切都很好，但我似乎无法将画布集中在一起：

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

我尝试了我最喜欢的方法（位置=绝对，顶部/底部/左/右= 0，边距=自动），这令人惊讶地垂直居中，但不是水平居中。我认为这是因为画布宽度大于100％。但据我所知，价值需要保持在16：9。

我打算尝试左：50％有负边距，但尺寸是动态的。

有什么想法吗？我知道绝对的中心元素已被谈到死亡，但我觉得我可能有一个新案例？

如果没有很多css hacks就无法完成，我将不得不求助于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%);

}

使用通常的技巧，不能将16：9溢出的元素绝对居中

1 个答案: