小编tra*_*ang的帖子

我正在设计一个具有二维码扫描功能的网站，所需的界面如下。

当相机打开时，它将是全屏的，相机被透明的黑色层覆盖，但中间是一个未屏蔽的方块，用于扫描二维码。

我设计了这样的 HTML：

<div class="videobox">
            <div class="shape-qr"></div>
            <div class="videobox__inner">
                <video id="video" autoplay playsinline ></video>
            </div>
         </div>

CSS：

.videobox, #video{
        text-align: center;
        position: relative;
        height: 100%;
        width: 100%;
    }
    .videobox .shape-qr{
        background: rgba(0,0,0,0.5);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right:0;
        bottom: 0;
    }

结果是这样的，但是不知道如何让相机在正方形空间居中

同情英语不好，期待大家帮忙！

谢谢你！