|
本文通过实例代码给大家介绍了css遮罩全屏居中对齐的实现方式，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
具体代码如下所示：
<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>
2018716171432818.gif
总结
以上所述是小编给大家介绍的css遮罩全屏居中对齐的实现方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ | 
发表于 2018-7-16 17:18:48
