前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。
一、div宽高固定，使用css实现居中效果
①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,left自身宽高的负1/2距离，使shadow-bg的中心点移动到屏幕正中央。
②最外层shadow-box为遮罩效果，这样弹框居中时，也不会产生滚动效果。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>在线预约平台--预约提示</title><meta name="keywords" content=""><meta name="description" content=""><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style>.shadow-box {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3);}.shadow {position: absolute;top: 50%;left: 50%;}.shadow-bg {width: 618px;height: 400px;position: absolute;top: -309px;left: -200px;background: url(images/pic.png) no-repeat center;}</style></head><body><div class="shadow-box"><div class="shadow"><div class="shadow-bg"></div></div></div></body></html>
在游览器显示效果如下所示：
这种方法简单便捷，而且兼容性好，可以兼容Firefox、Google、Edge和IE（IE可以向下兼容到8以下），使用范围较为广泛。
PS：进阶版本
再此基础上，可以再简化代码结构和css效果，具体情况如下：
①最外层的div:shadow-box设为遮罩，通过fixed固定位置，left:0,right:0铺满屏幕；
②弹框shadow-bg，通过absolute定位，left:50%,right:50%,使div左上角移动到屏幕中央，为了使其div内容主体移动到中间，使用margin-left和margin-right使其向上、向左移动自身宽高的1/2的距离，达到效果。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>在线预约平台--预约提示</title><meta name="keywords" content=""><meta name="description" content=""><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style>.shadow-box {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3);}.shadow-bg {width: 618px;height: 400px;position: absolute;top: 50%;left: 50%;margin-left: -309px;margin-right: -200px;background: url(images/pic.png) no-repeat center;}</style></head><body><div class="shadow-box"><div class="shadow-bg"></div></div></body></html>
二、div宽高固定，使用css（transform函数）实现居中效果
①父元素shadow通过fixed固定位置，并添加遮罩效果；②子元素shadow-bg通过absolute定位，通过top:50%和left:50%，使shadow-bg的左上角移至屏幕中央，再通过transform:translate(-50%,50%),使其主体内容移至中间位置。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>弹框</title><meta name="keywords" content=""><meta name="description" content=""><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style>.shadow {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.3);z-index: 999;}.shadow-bg {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);width: 618px;height: 400px;background: url(images/pic.png);}</style></head><body><div class="shadow"><div class="shadow-bg"></div></div></body></html>
兼容性：因为transform函数为css3中的新特性，所以支持IE9+的游览器，如果不需要向下兼容的话，可以考虑此方法。
三、用jQuery实现div水平和垂直居中
此方法可以不必知道div的宽高大小，也能实现水平垂直居中，适用于弹框内容为动态的情况。
①通过jQuery来设置div的css，获取div块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去div的宽度，得到的值再除以2即左偏移量，右偏移量算法相同；②注意div的css设置要在resize()方法中完成，这样每次改变窗口大小时，都要执行设置div元素的css。
jQuery代码：
$(window).resize(function() {$(".myblock").css({position: "absolute",left: ($(window).width() - $(".myblock").outerWidth())/2,top: ($(window).height() - $(".myblock").outerHeight())/2,});});
此外在页面载入时，就需要调用resize()方法
$(function() {$(window).resize();});
这种方法，可以不需要知道div元素的具体宽度和高度大小，直接用jQuery就可以实现水平垂直居中，而且兼容各游览器，这种方法在很多弹出层效果中应用。
（tips:在页面的外面建一个Table，设置高度为100%，然后设置td垂直居中显示，把页面套进去就可以了。）
参考博客：css超简单实现div页面居中【适合做弹出框】/sxs161028/p/7359651.html
让div等块级元素水平以及垂直居中的解决方法 /hafiz/p/5492409.html
版权声明：本文为博主原创文章，未经博主允许 。
如果觉得《弹出框--用css实现div在页面居中（水平垂直居中效果）》对你有帮助，请点赞、收藏，并留下你的观点哦！
