方法一：
对一个div进行以下设置即可实现居中。
CSS Code复制内容到剪贴板 <style> #a{ position: fixed; top: 0px; left: 0px; rightright: 0px; bottombottom: 0px; margin: auto; } </style> XML/HTML Code复制内容到剪贴板 <!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>效果：
方法二：
使用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
