zoukankan      html  css  js  c++  java
  • jQuery创建水平和垂直居中的div窗口

    在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现。
    1、通过css实现水平居中:

    .className{
     margin:0 auto;
     200px;
     height:200px;
    }

    2、通过css实现水平居中和垂直居中

    通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸:

    .className{
     300px;
     height:200px;
     position:absolute;
     left:50%;
     top:50%;
     margin:-100px 0 0 -150px;
    }

    3、通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只适用于有固定尺寸的div,所以到jQuery发挥作用了:

    $(window).resize(function(){
     $('.className').css({
      position:'absolute',
      left: ($(window).width() - $('.className').outerWidth())/2,
       top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
     });
    });
    //初始化函数
    $(window).resize();
  • 相关阅读:
    jquery 学习笔记
    session
    六、线程中断机制
    二、CompletableFuture(一)基础概念
    四、常见的锁
    五、synchronized细节
    三、CompletableFuture(二)常见用法
    七、等待唤醒的三种方式
    序列化 和 反序列化
    Trigger
  • 原文地址:https://www.cnblogs.com/marslin/p/3031987.html
Copyright © 2011-2022 走看看