css实现垂直水平居中

1、<div class="father">

       <div class="son"></div>

     </div>

.father {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red; 
 }
1、.son{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    border: 1px solid green;   

}

2、.son{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px；
    border: 1px solid green;   

}

参考别人：

3、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();

});