zoukankan      html  css  js  c++  java
  • 盒子在页面居中的三种方法

    1、前两种方法都是通过css样式来做到的,第三种是通过JS实现的

      第一种方法:IE8以下 不兼容

       

    div {
                 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }

      第二种方法:兼容IE11,10、9、8、7、5(亲测)

       左右都为50%的边距,最后要减去自身的宽高的一半,所以margin-left 和 margin-top为负数

     1 div {
     2              100px;
     3             height: 100px;
     4             background: red;
     5             position: absolute;
     6             top: 50%;
     7             left: 50%;
     8             margin-top: -50px;
     9             margin-left: -50px;
    10     }

      第三种方法

      var$div = document.querySelector('div');

    function Center(ev) {
    ev = ev || window.event;
    //获取盒子宽度
    var $div_width = $div.offsetWidth;
    //获取盒子高度
    var $div_height = $div.offsetHeight;
    //获取window 高度
    var Height = window.innerHeight;
    //获取window 宽度
    var Width = window.innerWidth;
    console.log(Width);
    //计算盒子距离顶部的距离
    var top = (Height - $div_height)/2
    //计算盒子距离左边的距离
    var left = (Width - $div_width) / 2

    $div.style.top = top + 'px';
    $div.style.left = left + 'px';
    console.log(Height);
    }
    Center();
    div {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    }
  • 相关阅读:
    [HNOI2006]超级英雄
    [CTSC1999]家园
    火星探险问题
    [HNOI2008]GT考试
    [USACO14DEC]后卫马克Guard Mark
    [NOI2018]归程
    [USACO15DEC]最大流Max Flow
    [NOIPlus]斗地主
    [LUOGU] P3128 [USACO15DEC]最大流Max Flow
    [BZOJ] 1878: [SDOI2009]HH的项链
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/9686255.html
Copyright © 2011-2022 走看看