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

最新推荐文章于 2024-07-09 10:20:31 发布

姚辉乾

最新推荐文章于 2024-07-09 10:20:31 发布

阅读量3.7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33026699/article/details/83864532

版权

vue 专栏收录该内容

74 篇文章 5 订阅

订阅专栏

<!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>