方法一：
对一个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
【设置一个DIV块固定在屏幕中央的两种方法(推荐)】相关文章：