弹出框--⽤css实现div在页⾯居中（⽔平垂直居中效果）
前⾔：在写页⾯的时候，经常会⽤到弹出框效果，⼀般使⽤插件进⾏处理，但是有时会出现冲突问题，下⽂将记录⽤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>
在游览器显⽰效果如下所⽰：
css设置文字垂直居中
这种⽅法简单便捷，⽽且兼容性好，可以兼容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的距离，达到效果。
<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%)，使其主体内容移⾄中间位置。
<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垂直居中显⽰，把页⾯套进去就可以了。）
版权声明：本⽂为博主原创⽂章，未经博主允许不得转载 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。