遮罩层屏幕居中(水平垂直居中)

最新推荐文章于 2022-08-31 23:25:33 发布

@航空母舰

最新推荐文章于 2022-08-31 23:25:33 发布

阅读量1k

点赞数

分类专栏： UI设计文章标签： javascript 开发工具 ViewUI

本文链接：https://blog.csdn.net/hudeyong926/article/details/99540699

版权

UI设计专栏收录该内容

31 篇文章 1 订阅

订阅专栏

css实现

<style>
.coverdiv{ /*遮罩层*/
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 18888;
	background-color: #000000;
	opacity: 0.7;
}
.toast {/*弹窗*/
    width: 300px;
    height: 200px;
    background: transparent;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}
</style>
<div id="coverdiv"></div>
<div class="toast"></div>

js实现div页面居中/遮罩

function get_position() {
    var p = {};
    var scrollWidth, scrollHeight;
    if (window.innerHeight && window.scrollMaxY) {
        scrollWidth = window.innerWidth + window.scrollMaxX;
        scrollHeight = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) {
        scrollWidth = document.body.scrollWidth;
        scrollHeight = document.body.scrollHeight;
    } else {
        scrollWidth = document.body.offsetWidth;
        scrollHeight = document.body.offsetHeight;
    }
    if (self.innerHeight) {
        if (document.documentElement.clientWidth) {
            p.windowWidth = document.documentElement.clientWidth;
        } else {
            p.windowWidth = self.innerWidth;
        }
        p.windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        p.windowWidth = document.documentElement.clientWidth;
        p.windowHeight = document.documentElement.clientHeight;
    } else if (document.body) {
        p.windowWidth = document.body.clientWidth;
        p.windowHeight = document.body.clientHeight;
    }
    if (scrollWidth < p.windowWidth) {
        p.width = scrollWidth;
    } else {
        p.width = p.windowWidth;
    }
    if (scrollHeight < p.windowHeight) {
        p.height = scrollHeight;
    } else {
        p.height = p.windowHeight;
    }
    p.windowWidth = Math.max(p.windowWidth, scrollWidth);
    p.windowHeight = Math.max(p.windowHeight, scrollHeight);

    if (typeof(window.pageXOffset) == "number") {
        p.left = window.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollLeft) {
        p.left = document.documentElement.scrollLeft;
    } else if (document.body) {
        p.left = document.body.scrollLeft;
    } else if (window.scrollX) {
        p.left = window.scrollX;
    }

    if (typeof(window.pageYOffset) == "number") {
        p.top = window.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        p.top = document.documentElement.scrollTop;
    } else if (document.body) {
        p.top = document.body.scrollTop;
    } else if (window.scrollY) {
        p.top = window.scrollY;
    }
    return p;
}
var p = get_position(); 
var left = p.left + ((p.width - $("#ddl_egg_msg_div").width()) / 2);  
var top = p.top + ((p.height - $("#ddl_egg_msg_div").height()) / 2);                          
$("#ddl_egg_msg_div").css({left:left,top:top});  
$("#coverdiv").width(p.width).height(p.windowHeight).show();//整页遮罩

文字水平垂直居中

.font_div{
    background-color: red;
    width: 60px;
    text-align:center;   /* 水平居中 */
    height: 100px;
    line-height: 100px;  /* 垂直居中=height */
}
.chilren { line-height: 100px;}
<div class="font_div">DIV文字</div