设置一个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. 一个关于vue+mysql+express的全栈项目（四）------ sequelize中部分解释

    一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = seque ...

  2. scrapy之自定制命令

    写好自己的爬虫项目之后,可以自己定制爬虫运行的命令. 一.单爬虫 在项目的根目录下新建一个py文件,如命名为start.py,写入如下代码: from scrapy.cmdline import ex ...

  3. 在WinForm里嵌入WPF模拟公交运行状态

    公司有个公交项目,模拟公交运行的时候使用的纯WinForm技术,5秒钟刷新一次,不仅看起来感觉很丑,而且性能上很有问题,听说一段时间后就会因为内存问题崩溃(估计是没释放非托管资源吧,不断重绘,非托管资 ...

  4. 大数据学习——linux常用命令（二）

    二.目录操作 1 查看目录信息 ls / 查看根目录下的文件信息 ls . 或者 ls ./查看当前目录下的文件信息 ls ../查看根目录下 ls /home/hadoop ls -l . 查看当前 ...

  5. Linux CentOS命令行界面字体重复问题解决记录

    问题描述: 安装完CentOS 6.5 mini版之后,安装图形界面,启动之后出现如下问题,字体有重复 应该是因为字体原因, 我的解决方法: yum -y install dejavu-sans-* ...

  6. ZOJ 2588 求割边问题

    题目链接:http://vjudge.net/problem/viewProblem.action?id=14877 题目大意: 要尽可能多的烧毁桥,另外还要保证图的连通性,问哪些桥是绝对不能烧毁的 ...

  7. poj 1163 数塔

    #include<stdio.h> #include<string.h> #define N 110 int dp[N][N]; int a[N][N]; int Max(in ...

  8. hdu 4046 Panda [线段树]

    Panda Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. 洛谷——P1951 收费站_NOI导刊2009提高（2）

    https://www.luogu.org/problem/show?pid=1951 题目描述 在某个遥远的国家里,有n个城市.编号为1,2,3,…,n. 这个国家的政府修建了m条双向的公路.每条公 ...

  10. P3366 最小生成树【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3366 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包 ...