Share Coding

Tutorials, Problems, Stuffs …

Tag Archives: center

How to make an Element to be Absolute Center on jQuery

In the previous tutorial that I have posted about Absolute Center on CSS:
https://sharecoding.wordpress.com/2012/02/15/absolute-center-in-css-fitting-all-browsers/

However, it can be made by jQuery too. By using jQuery, it is easier to be used on any elements.

Click here for Demo

// Center Method
$.fn.center = function() {
	this.css('position', 'absolute');
	this.css('left', '50%');
	this.css('top', '50%');
	this.css('margin-left', -this.width() / 2 + 'px');
	this.css('margin-top', -this.height() / 2 + 'px');
	return this;
}

$(document).ready(function() {

    // Use it easily
    $('#centerDiv').center();
    
});

Absolute Center in CSS fitting all browsers

Source and DEMO:

Click here for Demo