如何设置一个DIV块固定在屏幕中央

这篇文章主要介绍如何设置一个DIV块固定在屏幕中央，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括网站建设、成都网站建设、电商网站制作开发、微信小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

方法一：

对一个div进行以下设置即可实现居中。

<style>   
#a{   
    position: fixed;   
    top: 0px;   
    left: 0px;   
    rightright: 0px;   
    bottombottom: 0px;   
    margin: auto;   
}   
</style>

<!doctype html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        #a{   
            width: 200px;   
            height: 200px;   
            background-color: aquamarine;   
            position: fixed;   
            top: 0px;   
            left: 0px;   
            right: 0px;   
            bottom: 0px;   
            margin: auto;   
        }   
    </style>  
</head>  
<body>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
    <div id="a">  
        sdvcdvf   
    </div>  
</body>  
</html>

效果：

如何设置一个DIV块固定在屏幕中央

方法二：

使用js操作div的属性为下面这样即可实现居中。

<style>   
   #a{   
        width: 200px;   
        height: 200px;   
        background-color: aquamarine;   
        position: fixed;   
    }   
</style>   
  
<script>   
    window.onload=function(){   
        var a = document.getElementById("a");//获取div块对象   
        var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度   
        var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度   
        var gao1 = a.offsetHeight;//获取div块的高度值   
        var gao2 = a.offsetWidth;//获取div块的宽度值   
        var Sgao1= (Height - gao1)/2+"px";   
        var Sgao2= (Width - gao2)/2+"px";   
        a.style.top=Sgao1;   
        a.style.left=Sgao2;   
    }   
</script>

效果：

如何设置一个DIV块固定在屏幕中央

以上是“如何设置一个DIV块固定在屏幕中央”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

本文标题：如何设置一个DIV块固定在屏幕中央
网站网址：https://www.cdcxhl.com/article24/gjooce.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、自适应网站、网站维护、企业网站制作、手机网站建设、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容