Centering A Div placing the div to the center of a screen

[oxida 0]

Many people would like theire website in the center of the screen.This is how to do that.1. make a new css document.2. Then place the following code in it.

#main-div {	position: absolute;	top: 50%;	left: 50%;	width: 70em;	height: 50em;	margin-top: -25em; /*always take 1/2 from the size of the height, they have to be negative*/;	margin-left: -35em; /*always take 1/2 from the size of the width, they have to be negative*/}

Then place in your html: the following code.

<div id="main-div">content</div>

This wil place the div box in the center of the screen, works mostly for any resolution depends on the size of your div box.Hope this helped some people.

[Saint_Michael 3]

I would think that their be another way to do because using a negative number in order to center a website is a bit sloppy and HTML 4. Especially on the fact you would have to make the center fluid with all resolutions and so it could get a bit tricky and so I think a cleaner solution like this example http://forums.xisto.com/no_longer_exists/ would prove more beneficial. However, depending on how wide you make your layout you might have to change the dimensions a bit on how to position the layout.

[jlhaslip 4]

The Original posting shows a technique for centering a div in the viewport both horizontally and vertically.You need to know the exact dimensions of the div being centered, position it absolutely at top: 50% and left:50% with top and left negative margins exactly as the Topic Starter states. The link you show will center the page horizontally only, and is a good method to do that, but if the intent is to center the div from top to bottom/left to right, use the Opening Poster's method.

[shadowx 0]

The latest CSS trick ive found from a WYSIWYG editor (i only use it to make layouts! I then edit the code as its rubbish!) is to use:

margin-left: auto;margin-right: auto;

Works perfectly no matter what size window or div!

[Forbez 0]

Great tutorial, nice and simple and good use of examples. Perhaps you could host a demonstration of the code in use?

The latest CSS trick ive found from a WYSIWYG editor (i only use it to make layouts! I then edit the code as its rubbish!) is to use:

margin-left: auto;margin-right: auto;

Works perfectly no matter what size window or div!

^^^ This guy makes a very valid point, when web coding myself I use that way. Not to divert the attention away from your tutorial though, but that way is simpler and easier.

[triplebtalk 0]

Or you could go: margin: autoI think that this method is ridiculous and it seems never to make sense to go into adjusting percentages etc.

[iGuest 3]

 I tried this:

margin: auto

or margin-left: auto

margin-right:auto

works great with Firefox but doesn't work with my IE 8 with default settings. 

this code:

#main-div { position: absolute; top: 50%; left: 50%; width: 70em; height: 50em; margin-top: -25em; /*always take 1/2 from the size of the height, they have to be negative*/; margin-left: -35em; /*always take 1/2 from the size of the width, they have to be negative*/}

work well with firefox and my IE 8.

[iGuest 3]

This is awesomeCentering A Div

Thanks, this was exactly what I was looking for.

 One thing, though, your code has an extra semi-colon at the end of the first comment.

-reply by David D Ochoa