让元素垂直水平居中的三种方式

    结构:     <div class="box"></div>

  方法一:

    .box{

      width:300px;

      height:200px;

      position:absolute;

      left:50%;

      top:50%;

      margin-left:-150px;

      margin-top:-100px;

      background:red;

    }

  方式二:

    .box{

      width:300px;

      height:200px;

      background:red;

      position:absolute;

      left:0;

      top:0;

      right:0;

      bottom:0;

      margin:auto;

    }

  方式三:

    .box{

      width:300px;

      height:200px;

      background:red;

    }

  js部分:

    $(".box").css({

      position:absolute,

      left:($(window).width()-$(".box").outerWidth())/2,

      top:($(window).height()-$(".box").outerHeight())/2,  

    })

    

    .

猜你喜欢

转载自www.cnblogs.com/ly-qingqiu/p/10232055.html