设置一个DIV块固定在屏幕中央（两种方法） |
您所在的位置：网站首页 › 怎么把手机时间设置在屏幕中间 › 设置一个DIV块固定在屏幕中央（两种方法） |
设置一个DIV块固定在屏幕中央（两种方法）
|
设置一个DIV块固定在屏幕中央（两种方法） 方法一：对一个div进行以下设置即可实现居中。 #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } 
doctype html>
Document
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
sdvcdvf
全部代码Code
效果：
使用js操作div的属性为下面这样即可实现居中。 #a{ width: 200px; height: 200px; background-color: aquamarine; position: fixed; } 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; }
doctype html>
Document
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
}
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;
}
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
123123123123123123123
sdvcdvf
全部代码 Code
效果：
|
【本文地址】