具体代码如下所示：

<style>#toastLoaderFullScreen {    height: 100%;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 99999;    background-color: rgba(224, 38, 38, 0.5);}#toastLoader {   position: absolute;   left: 50%;   top: 45%;   width: 350px;   margin-left: -19px;   /* background-color: blue; */}#toastLoaderText {    position: fixed;    top: 53%;    left: 50%;    width: 250px;    margin-top: -10px;    margin-left: -125px;    word-wrap:break-word; /*自动换行*/    text-align: center;    /* background-color: red; */}</style><template>    <div id="toastLoaderFullScreen">        <div>             <mu-circular-progress id="toastLoader" :size="40" color="rgb(24, 143, 254)" v-show="isToastLoader"></mu-circular-progress>             <div id="toastLoaderText">                 <p>正在登录中</p>             </div>        </div>    </div></template><script>export default {    data() {        return {            isToastLoader: true        }    },    created() {        // setTimeout(() => {        //     this.isToastLoader = false        // }, 2000)    },    methods: {    }}</script>

总结

以上所述是小编给大家介绍的css遮罩全屏居中对齐的实现方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持！