Widget Pi » Snippets of Code http://wpmupremium.com/widgetpi Tracking Gadgets & Gizmos Since 1869 Wed, 26 Aug 2009 08:44:50 +0000 http://wordpress.org/?v=2.7 en hourly 1 Use CSS to Absolutely Center Align a DIV http://wpmupremium.com/widgetpi/using-css-only-to-absolutely-center-align-a-div/ http://wpmupremium.com/widgetpi/using-css-only-to-absolutely-center-align-a-div/#comments Fri, 31 Aug 2007 05:35:55 +0000 WPMUP TEAM http://blog.widgetpi.com/using-css-only-to-absolutely-center-align-a-div/ For those of you looking for the easiest way to absolutely center align a DIV using CSS only, and avoiding all of those really messy tables, whilst also wanting to fluidity in the design, please use the following code:

#container {
position: absolute;
left: 50%;
top: 50%;
width:560px;
height:380px;
margin-left: -280px; /* MUST UPDATE TO MATCH HALF THE WIDTH */
margin-top: -190px;  /* MUST UPDATE TO MATCH HALF THE HEIGHT */
}

Please note that if you change the width and height of the DIV, you must also change the margin left and top so that they exactly match half the size of the height and width. This can be avoided using percentages, but Internet Explorer does not accept percentages in height values, so to be truly cross-browser compatible, you need to do things manually for now, that is; until our up-coming DIVx widget has finished being baked!

]]> http://wpmupremium.com/widgetpi/using-css-only-to-absolutely-center-align-a-div/feed/