How to position a div element at the center of the ACTUAL screen? (JQuery)

http://stackoverflow.com/questions/15090439/how-to-position-a-div-element-at-the-center-of-the-actual-screen-jquery

by GoranMottram

HTML

<div id="myDiv">Hi!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat lacinia pellentesque. Nulla ac nunc nec quam egestas volutpat id in lorem. In ut justo et sapien dapibus eleifend. Nam tristique faucibus metus, a fringilla elit venenatis porttitor. Sed malesuada feugiat lobortis. Integer sodales pellentesque nisl, in molestie sapien porttitor vitae. Sed facilisis euismod dui vel commodo.</p>
<p>Donec et risus libero. Proin volutpat arcu quis est consequat id congue nibh fermentum. Donec purus sem, facilisis quis tincidunt id, elementum vel mi. Praesent vitae ligula tincidunt justo auctor sodales nec sed ante. Etiam ullamcorper dictum nibh id accumsan. Mauris vulputate, justo sed eleifend congue, orci libero tempor lacus, et lacinia lorem ipsum ut libero. Maecenas auctor ipsum at diam ultrices vel tristique tellus eleifend. Cras eu dui lectus. Donec id sem eget magna dictum cursus. Maecenas ac tincidunt ipsum. Sed fringilla pulvinar mi, at facilisis quam consectetur vitae. In pellentesque sagittis vehicula. Aliquam vestibulum pretium malesuada. Mauris nisl metus, venenatis eu congue non, egestas ut massa. Cras in diam odio, ut bibendum eros. Nam sollicitudin dictum elit sed iaculis.</p>
<p>Nam tempus lacus ut erat sodales vel sollicitudin risus viverra. Integer tellus dui, dictum vel tristique et, sodales ut eros. Mauris pretium, lectus non cursus tristique, urna nunc tristique neque, quis faucibus leo risus sed tellus. Sed porttitor tempor est quis laoreet. Ut ornare mi eget nisl egestas porttitor. Nullam molestie porttitor tortor, sit amet ultrices lacus tincidunt in. Quisque eu urna arcu, vel porttitor sapien. Ut mattis sodales ligula, vitae adipiscing ante rutrum eu. Donec eu nulla lectus. Etiam nibh eros, volutpat eu bibendum a, egestas a justo. Suspendisse pharetra tincidunt massa sit amet gravida. Nullam ut diam tortor, sit amet laoreet nibh. Aliquam erat volutpat.</p>
<p>Donec aliquet, purus vitae placerat consequat,...

CSS

#myDiv { width:200px; height:200px; padding:20px; background-color:#ccc; border:1px solid #666; }

JavaScript

$(function(){
    jQuery.fn.center = function ()
    {
        this.css("position","fixed");
        this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
        this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
        return this;
    }
   
    $('#myDiv').center();
    $(window).resize(function(){
       $('#myDiv').center();
    });
});