@H_ 512 _2@方法一：
对一个div进行以下设置即可实现居中。
CSS Code 复制内容到剪贴板
<style> &nbs p; # a{ pos IT ion : fixed ; top : 0px ; left : 0px ; right right : 0px ; bottom bottom : 0px ; m arg in : auto ; } </style>
XM L/HT ML Code 复制内容到剪贴板
<!docty PE html > < html lang = "zh-cn" > < head > < meta charset = "UTF-8" > < title > Document </ title > < style > *{ ;m ar gin : 0px; padding: 0px; } #a{ width: 200px; h ei ght: 200px; background-color: aqu am arine; 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 >
效果：
方法二：
使用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.cn blog s .COM /gaotenglong/ Arch ive/2016/07/24/5701434.html
总结
以上是 为你收集整理的 设置一个DIV块固定在屏幕中央的两种方法(推荐) 全部内容，希望文章能够帮你解决 设置一个DIV块固定在屏幕中央的两种方法(推荐) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于设置一个DIV块固定在屏幕中央的两种方法(推荐)的详细内容...