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

最新推荐文章于 2025-07-06 08:00:00 发布

原创最新推荐文章于 2025-07-06 08:00:00 发布 · 6.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何使用Vue.js实现元素的居中布局，通过监听窗口尺寸变化调整元素位置，实现响应式设计。代码示例包括HTML结构、Vue实例配置及CSS样式。

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>