设置一个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. 数据结构( Pyhon 语言描述 ) — — 第2章：集合概览

    集合类型 定义 个或多个其他对象的对象.集合拥有访问对象.插入对象.删除对象.确定集合大小以及遍历或访问集合的对象的操作 分类 根据组织方式进行 线性集合 线性集合按照位置排列其项,除了第一项,每一项 ...

  2. Vijos1144 皇宫看守 （0/1/2三种状态的普通树形Dp）

    题意: 给出一个树以及一些覆盖每个点的花费,求每个点都能被自己被覆盖,或者相邻的点被覆盖的最小价值. 细节: 其实我乍一眼看过去还以为是 战略游戏 的复制版 可爱的战略游戏在这里QAQ(请原谅这波广告 ...

  3. set()集合基本操作

    运用频次:☆☆ set是一个无序且不重复元素集,基本操作如下: 1. 创建set集合,会自动转换成set类型 2. add():添加元素 def add(self, *args, **kwargs): ...

  4. 《TC训练赛一》题解!

    以下题目标题就是此题题目链接,题目内容为了节省篇幅就不粘上去了.整套题的链接:https://acm.bnu.edu.cn/v3/contest_show.php?cid=8679#info 密码:7 ...

  5. NYOJ-517-最小公倍数,大数啊~~~

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致.但也并非纯粹的偶然:60是个优秀的数字,它的 ...

  6. [luoguP1835] 素数密度_NOI导刊2011提高（04）（素数筛）

    传送门 数据辣么大,怎么搞?(L≤R≤2147483647) 注意到R-L≤1000000 所以可以直接筛R-L区间内的数, 但是需要用已知的小的素数筛, R-L区间内的大部分数肯定能用较小的素数筛去 ...

  7. 转载：K-means聚类算法

    转载地址:http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006910.html K-means也是聚类算法中最简单的一种了,但是里面包含的思 ...

  8. [NOIP1998] 提高组 洛谷P1013 进制位

    题目描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: L K V E L L K V E K K V E KL V V E KL KK E E K ...

  9. Perforce share workspace between linux and windows

    p4 workspace 跨平台共享 (linux 和 window 共享) 用来存放代码的目录: linux存放代码目录: /home/username/ windows 上map network ...

  10. PAT (Advanced Level) 1031. Hello World for U (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...