CSS、JS 使DIV水平 和 垂直居中的各种方法

在Web开发中，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div。

    在这里，我总结出一些在工作中用到过的方法，和大家一起分享，疏漏之处，欢迎指导！

实例代码：

HTML:

<section class="pop-win">
    <div class="pop-main" id="pop-main"></div>
</section>

CSS:

.pop-win {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
}
.pop-win div {
	position:absolute;
	width:400px;
	height:200px;
	padding:10px;
	background: rgba(31,175,0,0.6);
	border:1px solid white;
	border-radius:6px;
}

/*CSS 水平和垂直居中方法【 1  CSS3】：  将父级元素设为盒子模型，使子元素水平垂直居中。
.pop-win {
	display:flex;
	justify-content:center;
	align-items:center;
} */

/*CSS 水平和垂直居中方法【 2 CSS2】： 将要设置居中的元素分别向 下 和 向 右 各偏移50%，再将margin值设为 负的 元素本身的宽高咸半
.pop-main {
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-200px;
}*/

/*CSS 水平和垂直居中方法【 3 CSS3】： 和上面方法2的原理一样
.pop-main {
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}*/

/*CSS 水平和垂直居中方法【 4 推荐】：将要设置居中的元素上 、右、下、左 都设为0，再将margin值设为水平垂直居中
.pop-main {
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	margin:auto;
}*/

代码说明：

/*一，CSS元素的居中方法*/

.要设置居中的元素 { position : absolute ;  width : 400px ;  height : 200px ; }




/*CSS 水平和垂直居中【方法1  CSS3】：  将父级元素设为盒子模型，使子元素水平垂直居中。 */

.pop-win{  display : flex; justify- content :  center ; align-items:  center ;}




/*CSS 水平和垂直居中【方法2 CSS2】： 将要设置居中的元素分别向 下 和 向 右 各偏移50%，再将margin值设为 负的 元素本身的宽高咸半*/

.pop-main{  top :  50% ;  left :  50% ;  margin-top :  -100px ;  margin-left :  -200px ;}




/*CSS 水平和垂直居中【方法3 CSS3】： 和上面方法2的原理一样*/

.pop-main{  top :  50% ;  left :  50% ;  transform: translate( -50% ,  -50% ); }




/*CSS 水平和垂直居中【方法4 推荐】：将要设置居中的元素上 、右、下、左 都设为0，再将margin值设为水平垂直居中*/

.pop-main{  top :  0px ;  right :  0px ;  bottom :  0px ;  left :  0px ;  margin :  auto ;}

JS:

window.onload = function() {
    var oMain = document.querySelector('#pop-main');
    (function(doc, win) {
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                console.log('窗口大小被改变啦。。。');
                oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 + 'px';
                oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 + 'px';
            };
        if(!doc.addEventListener) {
            return false;
        }
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
};

代码说明：

有时候，想要居中元素是通过js代码动态生成的，用js，同样可以使元素水平和垂直居中（监听浏览器窗口大小被改变时，重新定位）。