方法一：
对一个div进行以下设置即可实现居中。
CSS Code复制内容到剪贴板
<style>#a{position:fixed;top:0px;left:0px;rightright:0px;bottombottom:0px;margin:auto;}</style>XML/HTML Code复制内容到剪贴板
<!doctypehtml><htmllang="zh-cn"><head><metacharset="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><divid="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(){vara=document.getElementById("a");//获取div块对象varHeight=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度varWidth=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度vargao1=a.offsetHeight;//获取div块的高度值vargao2=a.offsetWidth;//获取div块的宽度值varSgao1=(Height-gao1)/2+"px";varSgao2=(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
