您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

【原】如何利用js实现div动态水平垂直居中显示

不忘初心 2019-06-20 围观() 评论() 点赞() 【WEB前端】

简介：如何用js实现div盒子的垂直水平动态居中显示？在一般的弹框组件中，弹出来的alert窗口基本上都在屏幕的正中央，也就是说开发者们用js实现了div的垂直水平居中显示，而且还是动态显示，不管弹出来的框框有多大，只要不超过屏幕宽度，都可以计算出来坐标，从而实现居中效果。

在一般的弹框组件中，弹出来的alert窗口基本上都在屏幕的正中央，也就是说开发者们用js实现了div的垂直水平居中显示，而且还是动态显示，不管弹出来的框框有多大，只要不超过屏幕宽度，都可以计算出来坐标，从而实现居中效果。

话不多说，直接上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js实现div居中显示，垂直居中、水平居中</title>
    <style type="text/css">
        #lrdialog{
            position: relative;
            width: 500px;
            height: 300px;
            background: #eee;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="lrdialog">
        我是一个垂直水平居中的DIV
    </div>
    <button onclick="align()">
        点我居中
    </button>
    <script type="text/javascript">
        // 控制dialog水平垂直居中
        function align() {
            //获取DIV为lrdialog的盒子
            var oBox = document.getElementById('lrdialog');
            //获取元素自身的宽度
            var width = oBox.offsetWidth;
            //获取元素自身的高度
            var height = oBox.offsetHeight;
            //获取实际页面的left值。（页面宽度减去元素自身宽度/2）
            var left = (document.documentElement.clientWidth - width) / 2;
            //获取实际页面的top值。（页面宽度减去元素自身高度/2）
            var top = (document.documentElement.clientHeight - height) / 2;
            //将计算之后的值赋给lrdialog
            oBox.style.left = left+'px';
            oBox.style.top = top+'px';
        }
    </script>
</body>
</html>

通过按钮点击触发div盒子的动态居中显示：

如何利用js实现div动态水平垂直居中显示

当浏览器页面发生改变时，DIV随着页面的改变居中：

window.onresize = function(){
    // 若是div隐藏了就不操作
    if (!$("#lrdialog").is(':hidden')) {
        align();
    }
}

css也可以使用同样的原理，但是在top的时候不好使，左右居中除了使用margin：auto之外，也可以先让他left偏移50%，然后再margin-left它本身宽度的负一半。

div js

看完文章，有任何疑问，请加入群聊一起交流！！！

很赞哦！ ()

上一篇：css实现div居中显示，垂直居中、水平居中

下一篇：JS禁止页面右键菜单，并且自定义鼠标右键菜单

文章评论

请先说点什么

人参与，条评论

站长推荐

写给关注支持我的朋友和攻击我网站的人（封面针对后者）

标签云

猜你喜欢

站点信息

网站程序：spring + freemarker
主题模板：《今夕何夕》
文章统计：篇文章
标签管理：标签云
微信公众号：扫描二维码，关注我们