jquery 원소 자체 적응 수평 수직 거중 실현

jquery        ：

(function($){

    $.fn.vhAlign =  function(){

        return this.each(function(i){

            //         

            var h = Math.ceil($(this).height());

            //outerHeight=padding+border+height

            var oh = Math.ceil($(this).outerHeight());

            //  margin-top 

            var mt = Math.ceil(oh / 2);

            //      

            var w = Math.ceil($(this).width());

            //outerWidth=padding+border+width

            var ow = Math.ceil($(this).outerWidth());

            //  margin-left

            var ml = Math.ceil(ow / 2);

            //        

            $(this).css({

                "margin-top": "-" + mt + "px",

                "top": "50%",

                "margin-left": "-" + ml + "px",

                "left": "50%",

                "width":w,

                "height":h,

                "position": "absolute"

            }); 

        });

    };

})(jQuery);

  demo：

$(window).resize(function(){ 

    $(".mydiv").css({ 

        position: "absolute", 

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

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

    });        

}); 

        ，     resize()。

 

$(function(){ 

    $(window).resize(); 

});

 

jQuery          ：

$.fn.imgVAlign=function(){

return $(this).each(function(i){

//     src ，      bg

var bg = $(this).attr("src");

//                ，      

$(this).parent().css({"background": "url("+ bg +") no-repeat center center"

});

//     

$(this).css("opacity","0");

});

}

//        

$(document).ready(function(){

$(".imgBox img").imgVAlign();

});