你的位置:首页 > 网页设计

[网页设计]设置一个DIV块固定在屏幕中央(两种方法)


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

方法一:

  对一个div进行以下设置即可实现居中。

<style>#a{  position: fixed;  top: 0px;  left: 0px;  right: 0px;  bottom: 0px;  margin: auto;}</style>

<!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>

全部代码Code

效果:

方法二:

  使用js操作div的属性为下面这样即可实现居中。

<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>

<!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;    }  </style>  <script>    window.onload=function(){      var a = document.getElementById("a");      var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度      var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度      var gao1 = a.offsetHeight;      var gao2 = a.offsetWidth;      var Sgao1= (Height - gao1)/2+"px";      var Sgao2= (Width - gao2)/2+"px";      a.style.top=Sgao1;      a.style.left=Sgao2;    }  </script></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>

全部代码 Code

效果: