将视频的窗口设置在网页的中间，用flex布局如何操作，求解答

问题遇到的现象和发生背景

将视频的窗口设置在网页（不管分辨率怎么变化）的中间，用**flex布局**如何操作

img

问题相关代码，请勿粘贴截图
<style>
    html, body {
        padding: 0;
        margin: 0;
    }
    /*.playWnd {*/
    /*    width: 20px;                  !*播放容器的宽和高设定*!*/
    /*    height: 5px;*/

    /*}*/
    .playWnd
    {
        display: flex;
        align-items:center;
        justify-content:center;

    }


</style>

<body>
<!--视频窗口展示 开始-->
<div id="playWnd" class="playWnd" style="width: 20px; height: 5px;"></div>
<div id="rrapp" v-cloak>
    <div v-show="showStatus=='list'">
        <div class="grid-btn">
            <div class="layui-row layui-form-item" style="margin-bottom: 6px;">
                <div class="layui-col-sm2 layui-inline">
                    <input class="form-control" v-model="q.projectId" @keyup.enter="query" placeholder="巡查项目id">
                </div>
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

将视频的窗口设置在网页的中间，用**flex布局**如何操作

div
{
    display: flex;
    align-items:center;
  justify-content:center;
}

在 playWnd 前面加个点呢
————————————————
.playWnd
{
display: flex;
align-items:center;
justify-content:center;
}