7 replies to this topic

[oxida]

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]

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://www.shadow-fox.net/tutorial/How-to-...a-Layout-in-CSS 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]

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]

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]

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

shadowx, on Oct 16 2008, 12:51 PM, said:

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]

Or you could go:

margin: auto

I think that this method is ridiculous and it seems never to make sense to go into adjusting percentages etc.

[iGuest]

 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]

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