方法一：

对一个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

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