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,同样可以使元素水平和垂直居中(监听浏览器窗口大小被改变时,重新定位)。




  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值