zoukankan      html  css  js  c++  java
  • 设置一个DIV块固定在屏幕中央(两种方法)

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

    效果:

     

  • 相关阅读:
    喜大普奔,微软Microsoft JDBC Driver For SQL Server已发布到maven中央仓库
    maven jdbc 驱动安装
    SpringIoC和SpringMVC的快速入门
    再见 Spring Boot 1.X ,Spring Boot 2.X 走向舞台中心
    LRU设计
    二叉搜索树转换成双向链表
    快速排序
    二叉搜索树的先序中序后序非递归遍历代码
    EM算法
    模型调优
  • 原文地址:https://www.cnblogs.com/gaotenglong/p/5701434.html
Copyright © 2011-2022 走看看