设置一个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 以及 pywin32添加注册表

    python 添加注册表信息: import sys from winreg import * # tweak as necessary version = sys.version[:3] insta ...

  2. 一个关于vue+mysql+express的全栈项目（五）------ 实时聊天部分socket.io

    一.基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client) Socket.io是一个WebSocket库, ...

  3. LeetCode（57） Insert Interval

    题目 Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if nece ...

  4. Android开发——Activity生命周期

    Android开发--Activity生命周期 Activity作为四大组件之首,也是使用最频繁的一种组件.本文将主要讲解Activity生命周期,包括正常情况下的Activity生命周期和异常情况下 ...

  5. LINUX常见小问题汇总

    1. crontab的备份与恢复 备份crontab文件: crontab -l > $HOME/mycron 恢复丢失的crontab文件: 如果不小心误删了crontab文件,假设你在自己的 ...

  6. react native 标签出错.

    这种错误为标签错误,没办法,你只能往标签上找了,但不一定是<Text></Text>,我是在<TextInput></TextInput>上出错的,多了 ...

  7. python018 Python3 输入和输出

    Python3 输入和输出在前面几个章节中,我们其实已经接触了 Python 的输入输出的功能.本章节我们将具体介绍 Python 的输入输出. 输出格式美化Python两种输出值的方式: 表达式语句 ...

  8. [luoguP2184] 贪婪大陆（树状数组）

    传送门 用两个树状数组,cr 维护 1....x 中 r 的数量 cl 维护 1....x 中 l 的数量 求答案的时候只需要求 y 前面 被作为左端点 的个数 - x 前面 被作为右端点的个数 —— ...

  9. java中filter的用法

    filter过滤器主要使用于前台向后台传递数据是的过滤操作.程度很简单就不说明了,直接给几个已经写好的代码: 一.使浏览器不缓存页面的过滤器 Java代码   import javax.servlet ...

  10. java面向对象基础编程题

    第一题: 设计一个形状类Shape,方法:求周长和求面积.形状类的子类:Rect(矩形),Circle(圆形).Rect类的子类:Square(正方形).不同的子类会有不同的计算周长和面积的方法1.总 ...