让div等块级元素水平以及垂直居中的解决办法

一、背景

　　我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中。

二、解决办法

1.CSS让div等块级元素水平居中

　原理：让一个div等块级元素水平居中，直接用CSS就可以做到。只要设置了div等块级元素的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得div等块级元素居中。

　CSS代码：

.mycss{

    margin:0 auto;

    width:300px;

    height:200px;

}

但是如果要使div等块级元素垂直方向也居中，恐怕CSS需要修改了。

2.CSS让一行内容垂直居中显示

　原理：当我们设置该行元素的高度和行高相同时，CSS会让它自动垂直居中显示。

　CSS代码：

  .mycss{

     height:200px;

     line-height:20px;

}

3.让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

　实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{

   width:300px;

   height:200px;

   position:absolute;

   left:50%;

   top:50%;

   margin:-100px 0 0 -150px

}

该方法使用普遍，但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的，比方说需要弹出一个div等块级元素元素层并且要居中显示，div等块级元素的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{

    position: absolute;

    left: 0px;

    right:;

    top:;

    bottom:;

    margin: auto;

    height: 200px;

    width: 300px;

}

4.jQuery实现水平和垂直居中

　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置div等块级元素的CSS。

　jquery代码：

$(window).resize(function(){

    $(".myblock").css({

        position: "absolute",

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

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

    });

});

此外在页面载入时，就需要调用resize()方法

$(function(){

    $(window).resize();

});

此方法的好处就是不需要知道div等块级元素的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。

tips:在页面的外面建一个table，设置高度为100%，然后设置td垂直居中显示，把页面套进去就OK拉！

巴特西

让div等块级元素水平以及垂直居中的解决办法

一、背景

二、解决办法

最新文章

热门文章