Posted By

ginoplusio on 12/16/08

Tagged

javascript
center

Versions (?)

Last Edited at 12/16/08 08:05am

Statistics

Viewed 967 times

Favorited by 0 user(s)

Related snippets

javascript to center a div with prototype.js

/ Published in: JavaScript

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

var elt         = $('ID_DIV_TO_CENTER');
 
// retrieve required dimensions
var eltDims     = elt.getDimensions();
var browserDims = document.body.getDimensions();
 
// calculate the center of the page using the browser and element dimensions
var y  = (browserDims.height - eltDims.height) / 2;
var x = (browserDims.width - eltDims.width) / 2;
 
// set the style of the element so it is centered
var styles = { position : 'absolute',
	top      : y + 'px',
	left     : x + 'px' };
 
elt.setStyle(styles);
elt.scrollTo();