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

方法一：

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

1. style>   
2. #a{   
3.     posITion: fixed;   
4.     top: 0px;   
5.     left: 0px;   
6.     rightright: 0px;   
7.     bottombottom: 0px;   
8.     margin: auto;   
9. }   
10. /style>   

1. !doctyPE html>   
2. html lang="zh-cn">   
3. head>   
4.     meta charset="UTF-8">   
5.     title> Document/title>   
6.     style>   
7.         *{   
8.             margin: 0px;   
9.             padding: 0px;   
10.         }   
11.         #a{   
12.             width: 200px;   
13.             height: 200px;   
14.             background-color: aquamarine;   
15.             position: fixed;   
16.             top: 0px;   
17.             left: 0px;   
18.             right: 0px;   
19.             bottom: 0px;   
20.             margin: auto;   
21.         }   
22.     /style>   
23. /head>   
24. body>   
25. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
26. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
27. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
28. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
29. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
30. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
31. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
32. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
33. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
34. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
35. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
36. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
37. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
38. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
39. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
40. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
41. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
42. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
43. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
44. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
45. p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p> p> 123/p>   
46.     div id="a">   
47.         sdvcdvf   
48.     /div>   
49. /body>   
50. /html>   

效果：

方法二：

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

1. style>    
2.    #a{   
3.         width: 200px;   
4.         height: 200px;   
5.         background-color: aquamarine;   
6.         position: fixed;   
7.     }   
8. /style>   
9.   
10. script>   
11.     window.onload=function(){   
12.         VAR a = document.getElementById("a"); //获取div块对象   
13.         var Height=document.documentElement.clientHeight; //取得浏览器页面可视区域的宽度   
14.         var Width=document.documentElement.clientWidth; //取得浏览器页面可视区域的宽度   
15.         var gao1 = a.offsetHeight; //获取div块的高度值   
16.         var gao2 = a.offsetWidth; //获取div块的宽度值   
17.         var Sgao1= (Height - gao1)/2+"px";   
18.         var Sgao2= (Width - gao2)/2+"px";   
19.         a.style.top=Sgao1;   
20.         a.style.left=Sgao2;   
21.     }   
22. /script>   

效果：

以上这篇设置一个DIV块固定在屏幕中央的两种方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.COM/gaotenglong/Archive/2016/07/24/5701434.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！