设置一个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

效果：

设置一个DIV块固定在屏幕中央（两种方法）的更多相关文章

  1. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  2. 牛客网：将两个单调递增的链表合并为一个单调递增的链表-Python实现-两种方法讲解

    方法一和方法二的执行效率,可以大致的计算时间复杂度加以对比,方法一优于方法二   1. 方法一: 思路: 1. 新创建一个链表节点头,假设这里就叫 head3: 2. 因为另外两个链表都为单调递增,所 ...

  3. Codeforces Round #363 (Div. 2) C dp或贪心 两种方法

    Description Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasy ...

  4. php在数字前面补0得到固定长度数字的两种方法

    比較基础,事实上两个内置函数都能实现. 1  sprintf 语法: string sprintf(string format, mixed [args]...); 返回值: 字符串 函数种类: 资料 ...

  5. 串口通信 之 linux固定串口别名的两种方法

    转载:https://blog.csdn.net/beiguodexuecsdn/article/details/103099456 最近阅读的好文:https://blog.csdn.net/mrd ...

  6. 可采用两种方法得到一个EJB对象

    (本文是转载其他人的技术文章,觉得说得挺浅显易懂,特借来学习)     在前面学习的例子中,只有一个EJB,但是对于一个真实的项目,EJB的数量可以有很多,而且EJB之间也会互相调用,那么在一个EJB ...

  7. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. 怎样设置一个DIV在所有层的最上层，最上层DIV

    怎样设置一个DIV在所有层的最上层,最上层DIV,其实很简单,只需要在这个DIV上使用这个样式即可,z-index:99999

  9. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

随机推荐

  1. python常用函数 C

    1. Counter(hashable) 直接使用统计可哈希元素每个元素的数量. 2. most_common:可以统计数量最多的n个元素. from collections import Count ...

  2. str内部方法释义

    1. __add__:字符串拼接 [示例]:>>> str1=‘good’>>> str1.__add__(‘morning’)>>> ‘good ...

  3. Relocation（状压DP）

    Description Emma and Eric are moving to their new house they bought after returning from their honey ...

  4. HDU1021-Fibonacci Again，，找规律就好了~~~

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. 机器学习基础-Logistic回归2

    随机梯度上升法--一次仅用一个样本点来更新回归系数(因为可以在新样本到来时对分类器进行增量式更新,因而属于在线学习算法) 梯度上升法在每次更新回归系统时都需要遍历整个数据集,该方法在处理100个左右的 ...

  6. HDU 4418 高斯消元解决概率期望

    题目大意: 一个人在n长的路径上走到底再往回,走i步停下来的概率为Pi , 求从起点开始到自己所希望的终点所走步数的数学期望 因为每个位置都跟后m个位置的数学期望有关 E[i] = sigma((E[ ...

  7. 【二分图匹配】E. 过山车

    https://www.bnuoj.com/v3/contest_show.php?cid=9154#problem/E [题意] 裸的最大匹配 [教训] 一开始边数开了k,建的是无向图,结果T了,改 ...

  8. j_spring_security_check 404错误

    折腾了好久,还是写一篇备忘 折腾了好久,还是写一篇备忘 首先检查路径 <form class="form-signin" method="POST" ac ...

  9. Minimum Spanning Tree.prim/kruskal(并查集)

    开始了最小生成树,以简单应用为例hoj1323,1232(求连通分支数,直接并查集即可) prim(n*n) 一般用于稠密图,而Kruskal(m*log(m))用于系稀疏图 #include< ...

  10. linux 开机启动脚本或者服务

    https://blog.csdn.net/zhuchunyan_aijia/article/details/53811368