Centering element with jQuery and CSS for website, Blogspot, Wordpress

Centering element vertically and horizontally on a browser's window with jQuery and CSS, you can use one of these implementations in your website, blogs, and everywhere else as long as you can attach jQuery or CSS code inside it and the host support them.

jQuery method

You need jQuery first, you can link the script to http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js or you can put the script on your webserver. And here's the jQuery method for centering element:

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

The implementation $(element).center();

CSS implementation

And for centering element with CSS, you can use this code:

#content {
    width: 80%;
    height:50%;
    display: table; /* IE8+ */
    margin:auto; 
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    overflow:auto;
    width:40%; height:50%;
}

The properties like postion, margin, top, left, right, bottom do the centering along with width and height that the values set lower than the container element's values to make the containing element does the way you wanted.


Use CSS, it's more lighter and the CSS code still work if a user disabled Javascript or uses any of Javascript blockers, such as Noscript. More..