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

待我称王封你为后i 2022-04-16 01:24 874阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，874人围观）

还没有评论，来说两句吧...

相关阅读

相关水平垂直居中

实现水平垂直居中的方法有很多，在这里我只介绍两种易用且常见的方法，这两种方法对于固定宽高和不定宽高都有效。 1、transform 方案 // html部分

Bertha 。/ 2023年08月17日 17:39/ 0 赞/ 164 阅读

相关水平/垂直居中

一. 水平居中 1.1行内或类行内元素（比如文本和链接）在块级父容器中让行内元素居中，只需使用 text-align: center;：这种方法可以

我就是我/ 2023年07月11日 05:36/ 0 赞/ 22 阅读

相关水平垂直居中

（1）水平居中：元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位（或

你的名字/ 2022年10月27日 12:28/ 0 赞/ 227 阅读

相关水平垂直居中——position与margin的结合使用

水平垂直居中在页面的布局中还是会经常用到的，比如讲一个图片水平居中显示？我们都知道水平居中的时候我们可以使用margin: 0 auto;，但是在垂直方向上使用margin

今天药忘吃喽~/ 2022年06月13日 04:07/ 0 赞/ 215 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 461 阅读

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

1:html <div class="box"> <div ref='wh' class="abc">yaohuiqi

待我称王封你为后i/ 2022年04月16日 01:24/ 0 赞/ 875 阅读

相关水平垂直居中

文档 [转载][Link 1] div绝对定位水平垂直居中(未知容器，已知元素宽高) 方案一：margin:auto实现绝对定位元素的居中 <!DO

青旅半醒/ 2022年01月19日 23:47/ 0 赞/ 408 阅读

相关水平居中和垂直居中

水平居中若元素为inline元素比如`a,b,strong,i,span,img,input,select`等，为父元素设置`text-align: cent

约定不等于承诺〃/ 2022年01月18日 23:11/ 0 赞/ 408 阅读

相关水平居中和垂直居中

1.水平居中 (1) 文本、图片等行内元素的水平居中　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元

た入场券/ 2021年11月23日 08:08/ 0 赞/ 456 阅读

相关水平垂直居中

几种水平垂直居中固定宽高 1. margin 负值 <div class="a"> <div class="a1"></div>

﹏ヽ暗。殇╰゛Y/ 2021年08月30日 01:18/ 0 赞/ 540 阅读