加载中…
正文 字体大小:

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

(2017-02-16 15:50:11)
分类: DIV CSS

方法一:

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

<</span>style> 
#a{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    margin: auto; 
} 
</</span>style> 
doctype html> 
<</span>html lang="zh-cn"> 
<</span>head> 
    <</span>meta charset="UTF-8"> 
    <</span>title>Document</</span>title> 
    <</span>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; 
        } 
    </</span>style> 
</</span>head> 
<</span>body> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
    <</span>div id="a"> 
        sdvcdvf 
    </</span>div> 
</</span>body> 
</</span>html>

效果:

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

方法二:

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

<</span>style>  
   #a{ 
        width: 200px; 
        height: 200px; 
        background-color: aquamarine; 
        position: fixed; 
    } 
</</span>style> 

<</span>script> 
    window.onload=function(){ 
        var a = document.getElementByIdx_x("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; 
    } 
</</span>script> 
doctype html> 
<</span>html lang="zh-cn"> 
<</span>head> 
    <</span>meta charset="UTF-8"> 
    <</span>title>Document</</span>title> 
    <</span>style> 
        *{ 
            margin: 0px; 
            padding: 0px; 
        } 
        #a{ 
            width: 200px; 
            height: 200px; 
            background-color: aquamarine; 
            position: fixed; 

        } 
    </</span>style> 
    <</span>script> 
        window.onload=function(){ 
            var a = document.getElementByIdx_x("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; 
        } 
    </</span>script> 
</</span>head> 
<</span>body> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
<</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p><</span>p>123</</span>p> 
    <</span>div id="a"> 
        sdvcdvf 
    </</span>div> 
</</span>body> 
</</span>html>

效果:

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

0

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有