设置一个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. 关于Spring的理解和相关笔记

    java不死的原因就是:就是因为他有一个核心非常强大的技术框架支持. Spring IOC: Inverse Of Control 控制反转 IFly fly; AOP: Aspect Oriente ...

  2. python之图形界面GUI开发 Tkinter 2014-4-7

    1.导入Tkinter 可以使用以下三种方法(1)from Tkinter import *#导入Tkinter(2)import TkinterTkinter.methodA使用 Tkinter.m ...

  3. 图的最小生成树——Kruskal算法

    Kruskal算法 图的最小生成树的算法之一,运用并查集思想来求出最小生成树. 基本思路就是把所有边从小到大排序,依次遍历这些边.如果这条边所连接的两个点在一个连通块里,遍历下一条边,如果不在,就把这 ...

  4. hexo干货系列：（六）hexo提交搜索引擎（百度+谷歌）

    前言 能看到这里,说明大家都跟我一样,已经把博客搭起来并洋洋洒洒写了几篇博文,正春风得意感觉良好的时候,搭建博客有屎以来最大的危机出现在没有准备的我面前,百度+谷歌都无法搜索到我的博客.装逼还没几天就 ...

  5. PTA 02-线性结构4 Pop Sequence (25分)

    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/665 5-3 Pop Sequence   (25分) Given a stack wh ...

  6. [Docker]容器镜像

     1.rootfs的基础知识 Mount namespaces 隔离的是文件系统挂接点,它使每个容器能看到不同的文件系统层次结构,即每当创建一个新容器时,希望容器进程看到的文件系统时一个独立的隔离环境 ...

  7. squid重定向（python 代码）

    #!/usr/bin/python2.7 # coding: utf-8 import sys,os,stat import transport def redirect_url(line,concu ...

  8. vi/vim复制粘贴命令

    1. 选定文本块.使用v进入可视模式,移动光标键选定内容. 2.复制的命令是y,即yank(提起) ,常用的命令如下:     y      在使用v模式选定了某一块的时候,复制选定块到缓冲区用:   ...

  9. SVN 学习笔记-高级操作

    所谓高级操作,只是曲高和寡,其实都不怎么用的.但是关键时候,可能会很有用. 这个高级只是针对基本操作而言.有些操作可能也是比较基本的. 清除锁 有时候我们在操作的时候,可能系统崩溃了,或者SVN非正常 ...

  10. zookeeper一二三

    1.zookeeper介绍 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现.分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅. ...