Centering A Div

oxida

Jun 30 2008, 08:57 AM

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.

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*/
}

Then place in your html: the following code.

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.

Comment/Reply (w/o sign-up)

Saint_Michael

Oct 16 2008, 02:29 AM

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.

Comment/Reply (w/o sign-up)

jlhaslip

Oct 16 2008, 02:55 AM

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.

Comment/Reply (w/o sign-up)

shadowx

Oct 16 2008, 11:51 AM

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:

CODE

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

Works perfectly no matter what size window or div!

Comment/Reply (w/o sign-up)

Forbez

Oct 16 2008, 04:02 PM

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

QUOTE(shadowx @ Oct 16 2008, 12:51 PM)

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:

CODE

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.

Comment/Reply (w/o sign-up)

triplebtalk

Jan 11 2009, 03:41 PM

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.

Comment/Reply (w/o sign-up)

(G)rmd

Jul 7 2009, 08:05 PM

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.

Comment/Reply (w/o sign-up)

Similar Topics

Keywords : Centering Div Placing Div Screen

How To Take A Screen Shot Of Your Desktop. - A Simple Tutorial (37)
Lots of people have asked me on how to capture a Screen Shot of their Desktop. So I thought I should
make a tutorial on how to... 1. Press the print screen button which should be: 2. Open an image
editing program like paint: 3. Press Ctrl+V (paste) 4. It should have pasted the Screen Shot,
Now save your image. You learnt how to take a Screen Shot of your Desktop. By .::DAMAN::....

Css Centering - (1)

Dynamic Signatures - The Real Way To Go - Forget placing index.php in a signature.png folder. (8)

This is only a very quick tutorial, meant to complement the dynamic signature tutorials that already
exist here. It's nothing new, but it was just brought to my attention that not many people seem
to be aware of this method. This does not cover the actual creation of dynamic signatures, per se -
but rather a better 'trick' to allow you to use dynamic signatures on forums such as this
one. I've noticed that most of the dynamic signature tutorials on this forum state that you
must place a file index.php in a folder .png, in order to trick Invision Power...

A Tutorial On How To Change Your Window's Screen Name's Icon - (0)

Have you ever wondered why you hae a fruity duck next to your name when you sign on to windows
(at the windows welcome screen)? Have you ever wanted to get rid of that fruity duck? Well if
you have and dont know how, this tutorial is for you! 1) Go to Start 2) Go to Controll Panel
3) Find and Go To User Accounts or for others 4) Then down at the bottom look again for
User Accounts, below "Or Pick A Controll Panel Icon" and click on it 5) Somthing Like this
should have poped up 6) Click on Change My Picture 7) From there you can selec...

Hide Names In Welcome Screen - in XP (0)

Annoyed by seeing many User Names in the Welcome Screen you can remove them Some times a user needs
to be added to access a network resource but the user will not be physically logged in to your
system. In such cases you can remove his/her name from the WelcomeScreen in Xp to do this go to
Registry editor as normal go to HKEY_LOCAL_MACHINE\SOFTWARE\MICROSOFT\WINDOWS NT\CURRENT
VERSION\WINLOGON\SPECIALACCOUNTS\USERLIST\ Right click in the empty space in the right pane and
create a new DWORD value Name this new value "Username" and enter "0" as the data value you are...

Remove Outlook Express Splash Screen - (3)

In order to remove the OE Splash screen you must edit your registry: 1. Run regedit 2. Go to the
key named something like
HKEY_CURRENT_USER\Identities\{EC7994FF-9DB7-4854-B5F1-C3D3956DED35}\Software\Microsoft\Outlook
Express\5.0 3. Add a new DWORD called "NoSplash" 4. Set it to "1" ...

Pda Cleaning Issues? - did windex crawl behind your screen? (1)

Hey, are you having a problem? windex or some cleaning agent get behind your screen? look no
further. I will show you how to suck that giant blob out of the screen. Please read ALL of the
instructions carefully before attempting! Step 1: make sure the screen is facing up. put the
PDA in a cool, dry place overnight. Even if you wake up in the morning and the blob is still there,
leave it alone. Step 2: Now it's time to break out the vacuum, and the narrow crevis tool. Put
it on, and hold the end like a pencil about a half of an inch away from the screen. Ma...

Looking for centering, div, placing, div, center, screen

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

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