首页   >   代码编程   >   WEB前端

如何利用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它本身宽度的负一半

QQ群: 686430774  /  718410762

站长Q: 1347384268

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-06-20

永久地址:https://www.jiweichengzhu.com/article/904804dafff645e085138407e0000264

评论