css實現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頁面居中/遮罩java
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();//整頁遮罩
文字水平垂直居中spa
.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
scode