块级元素水平垂直居中的四种方法

让div等块级元素水平和垂直都居中，即永远处于屏幕的中间，比如登录页面时非常有用

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

.mydiv{ 

   width:200px;  

   height:200px;  

   position:absolute;  

   left:50%;  

   top:50%;  

   margin:-100px 0 0 -100px }

2.利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

.mydiv{

    position: absolute;

    left: 0px;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    height: 200px;

    width: 200px;

}

3 jQuery实现水平和垂直居中

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

$(window).resize(function(){

    $(".myblock").css({

        position: "absolute",

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

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

});

在页面加载的时候调用刚刚创建的方法

$(function(){

    $(window).resize();

});

4使用transform

.mydiv{
width: 100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}