设置一个DIV块固定在屏幕中央的两种方法(推荐)

2020-05-01 09:48:37易采站长站整理

    <div id="a">  
        sdvcdvf   
    </div>  
</body>  
</html>  

效果:

方法二:

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

JavaScript Code复制内容到剪贴板

<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块固定在屏幕中央的两种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

原文地址:http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5701434.html