1:html

<div class="box">                
    <div ref='wh' class="abc">yaohuiqian1</div>            
</div>

2:vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>        
<script>
    new Vue({
        el: '.box',
        mounted() {
            let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            let l = w / 2 - this.$refs.wh.offsetWidth / 2;
            let t = h / 2 - this.$refs.wh.offsetHeight / 2;
            this.$refs.wh.style.left = l + "px"
            this.$refs.wh.style.top = t + "px"
        }
    })
</script> 

3:css样式

<style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, .2);
        }

        .abc {
             width: 500px;
             height: 500px;
             border: 1px solid red;
             position: absolute;
        }
    </style>