弹出框--用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>

在游览器显示效果如下所示：

这种方法简单便捷，而且兼容性好，可以兼容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页面居中【适合做弹出框】https://www.cnblogs.com/sxs161028/p/7359651.html

让div等块级元素水平以及垂直居中的解决方法 http://www.cnblogs.com/hafiz/p/5492409.html

弹出框--用css实现div在页面居中（水平垂直居中效果）

猜你喜欢