Vue的垂直水平居中运用于position: fixed;position: absolute;

Vue的垂直水平居中运用于position: fixed;position: absolute;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>帖子详情</title>
        <script src="js/vue.min.js"></script>
    <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>
   
    </head>
    <body>
        <div class="box">
                <div ref='wh' class="abc">
                    yaohuiqian1
                </div>
        </div>
        <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>
    </body>
</html>