Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

vertically centering webpage

djsound

djsound

macrumors 6502a
Original poster
Dec 4, 2006
791
17
So i have tried this so many times.. I just want to align my small simple site vertically so it is centered vertically on any browser resolution.

I tried this http://en.kioskea.net/faq/933-centering-vertically-a-web-page as it seemed like the easiest but it will not work. I made the center.js file with that script.... then I put this

<!-- [...] -->
<script type="text/javascript" src="center.js"></script>
..in my head and

<div id="centering">

<!Put the code of your webpage here. It will be centered -->

</div>

in my body....

then what do I do ? Just put the center.js file in the main folder of my website?? That is what I did and it does not work...

www.drawingaway.com

thanks if anyone know how to fix it.
 
I can't comment on the js because it's not really my thing, but I can tell you that a more common method of achieving the same result would be by using CSS.

Simply assign a width to your "centering" div and then set it's left and right margins to "auto".

your div will then be centred on any browser at any resolution.
 
to center vertically? hmm wow that sounds easy but it sounds like you are talking about horizontally...

i also set the top and bottom margins to 'auto' but no luck
 
Last edited:
djsound said:
to center vertically? hmm wow that sounds easy but it sounds like you are talking about horizontally...

i also set the top and bottom margins to 'auto' but no luck
Click to expand...

This CSS should center anything vertically (thanks to this article):
Code: 
.something {
display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;
}
 
.something {
display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;
}
[/CODE][/QUOTE]

hmmm...so I put that in the body? a bit confused =/
 
This page--go down to the section on "Vertical Centering"--discusses this. Although the site info applies this to tables, the same applies to divs. Essentially, just put the "100% height" declaration on the <html> tag, as well as the <body> tag:

html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}

Use the above CSS along with the following HTML:

<body>
<table id="wrapper">
<tr>
<td>This is centered</td>
</tr>
</table>
</body>

You can use either tables or divs. I recommend reading the entirety of the article, as it shows how to avoid quirks mode. Still relevant.

Another page you want to look at, another way of centering both horizontally and vertically, uses <divs> and absolute positioning.
 
Last edited:
I would use jQuery to get the height of the window, get the height of the document, divide the difference of the two heights by two then add a CSS "top", "margin-top", or "padding-top" of the result to the body or content div.
 
Dana ok I understand I put everything into a table or a div then I am going to do this to it?

html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}

....I still can not get it to work..I put that code in the head of the html?
 
By default I believe that anything in a table cell is centered vertically. So if you wrapped your content in a one row table it should be centered vertically. I know everyone hates tables but this may be the easiest way.
 
ya but the table doesnt automatically resize to top and bottom of any size screen..
 
What I originally listed is the css code that you would apply to your 1. <html> tag, your 2. <body> tag, and, 3. a <div> named (with an id of) "wrapper." This #wrapper div would contain _all_ content in the browser viewport, including any other divs you might want to nest inside.

In the css for wrapper, I used an example width of 400 pixels (so you could see the div on the page), but for absolute centering both horizontally and vertically, you would want to change this width to 100%.

And, yes, this css can go in the <head> of the document (embedded) or in an external stylesheet. Easiest way to understand this is to see it graphically. Go to this "Dead Center" page and then click on "View Construction" text link at the bottom for a graphical explanation. On the construction page choose VIEW | SOURCE from your browser. Then look at the code, both css and html. If you want, you can even copy the code--both css and html--in its entirety and use it for yourself as a template. You would have to edit the #content css width and height for your object's pixel dimensions (using negative margins in pixels), but that's it.

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}

I used it on this page. YOu can look at the source code here also. Also, note the DOCTYPE in the code and make sure you use the same one (4.01 transitional, loose, with a url).

This page uses pretty much the same method, except it uses a <float> for the divs, but it's a really good permutation.

There is a third way of absolutely centering using line-height, but I don't want to confuse you...anymore than I already have :eek: Vertical centering is a topic that current css2 doesn't really address effectively or provide handy tags for. So, just follow the Dead Centre example, as it's the easiest to understand, as it's graphical. (This is also essentially the same method that HomeBru Studios's jQuery script addresses.)

djsound said:
Dana ok I understand I put everything into a table or a div then I am going to do this to it?

html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}

....I still can not get it to work..I put that code in the head of the html?
Click to expand...
 
Last edited:
RE: your center.js file

I think the reason your original script didn't work is this:

"The align() function defined in the .js file will retrieve the content that should be centered. In this example, the item having the ID [id = "center"] will be centered. "

Thus the alignment will work only when you place _all_ content in a <div> named "center"...the ID [id = "center"]..."center" div in this case is the same as the #wrapper div I used. I notice you named your div <div id="centering">...that is _not_ the same name...probably why it didn't work.

Your js file itself goes in the document code between the <head> and </head> tags, i,e,:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="pvii-2010/p7irm/p7IRMscripts.js"></script>

The path to the .js file must also be correct in your code.



djsound said:
So i have tried this so many times.. I just want to align my small simple site vertically so it is centered vertically on any browser resolution.

I tried this http://en.kioskea.net/faq/933-centering-vertically-a-web-page as it seemed like the easiest but it will not work. I made the center.js file with that script.... then I put this

<!-- [...] -->
<script type="text/javascript" src="center.js"></script>
..in my head and

<div id="centering">

<!Put the code of your webpage here. It will be centered -->

</div>

in my body....

then what do I do ? Just put the center.js file in the main folder of my website?? That is what I did and it does not work...

www.drawingaway.com

thanks if anyone know how to fix it.
Click to expand...
 
hmmm...I still dont get it. SO complicated just to center the div or table... negative margins? ..wow I am totally lost now..
 
I use this bit of code all of the time. This will vertically and horizontally center your page:

CSS:
Code: 
body {
	margin: 0px; /* required */
}
div#wrapper {
	/* required */
	position: absolute;
	overflow: visible;
	display: block;
	width: 100%;
	left: 0px;
	top: 50%;
}
div#center {

	overflow: auto; /* set to taste */

	position: absolute; /* required */
	left: 50%; /* required */

	margin-left: -100px; /* half of width */
	width: 200px; /* width of div */

	top: -100px; /* half of height */
	height: 200px; /* height of div */
}

HTML:
Code: 
<div id="wrapper"><div id="center">

<!----YOUR CONTENT HERE---->

</div></div>

That's it! I wish I could credit it, but I forget where I got it from.

Hope that helps,
ARDesigns
 
ardesigns's css and accompanying html have commented out--in the example code--the specs needed to achieve negative margins for absolute centering, so perhaps that will clear things up for you. Essentially, it involves using a 50% offset, given the fixed dimensions of your object to be centered. His example pretty much explains it all, with great simplicity and efficiency. And, yes, you did tackle, ironically, one of the subjects that does not have an easy solution in web design;) Horizontal centering? That's easy. Vertical centering? Not so much.
 
Looking at your source code, you've put a fair amount of CSS in the head.

I would think about putting all the css for the content of your site into a seperate CSS file, such as "style.css" and linking to it with a reference in the header:

Code: 
<link href="style.css" rel="stylesheet" type="text/css" />

If you get time - try using CSS to move away from the tables you're using too. Good luck!
 
I don't know what type of site you're trying to create so take this as you will.

The reason it is hard to vertically center something in CSS is that the web is designed to be limited horizontally and flow downward. Not the other way around.

You're breaking a lot of conventions with starting by trying to do a V. centered site and the fact that you don't know how to implement a linked stylesheet tells me you might be missing out on a lot of the basics about semantic web site creation.

Maybe buy yourself a (e)book or two.
-----------------------------------------------
Solution:
Give your main container div a top margin of say 100px; and don't try to "center" it. If your div is only 600px or so high, it will appear centered.
 
Thanks for the info hobbbz. I know web sites are designed to flow downwards...so that would also mean that I know that I am trying to do something unconventional. If it was conventional I'm sure there would be a button that says "center vertically" in Dreamweaver or something. If you looked at the page I am talking about you would see that a style sheet IS attached to my div's...so again. Thanks. You obviously know everything about websites and yet you still offered a totally useless solution. Seriously , you think if my site starts 100 pixels fro the top that it will 'look vertically centered'?? hahaha..for one it will look different one every persons monitor with a different resolution. The ONLY common thing between viewers would be the 100 pixel margin on top....another thing, if my main div/table is 900 pixels high then it will run right off the bottom of the screen....and that WOULD NOT look vertically centered. Maybe you should read a book.


ardesigns -

top: -100px; /* half of height */
height: 200px; /* height of div */

I shouldn't have to put a height don't you think? Everyone has a different height depending on their screen resolution no? I think I should be able to just put 50% from top and thats it or something...that would mean 50% from top no matter what the resolution is....maybe I am wrong. I still cant get it to work..

I am trying to accomplish something like this.... http://antzmedia.com/sites/demo-div/div-at-the-center-of-screen.htm but with css. I have a mini site with everything within 1 table. I just want that one table to be vertically and horizontally centered like that example. Even when you change your browser size it stays centered in both directions.
 
Last edited:
djsound said:
Thanks for the info hobbbz. I know web sites are designed to flow downwards...so that would also mean that I know that I am trying to do something unconventional. If it was conventional I'm sure there would be a button that says "center vertically" in Dreamweaver or something. If you looked at the page I am talking about you would see that a style sheet IS attached to my div's...so again. Thanks. You obviously know everything about websites and yet you still offered a totally useless solution. Seriously , you think if my site starts 100 pixels fro the top that it will 'look vertically centered'?? hahaha..for one it will look different one every persons monitor with a different resolution. The ONLY common thing between viewers would be the 100 pixel margin on top....another thing, if my main div/table is 900 pixels high then it will run right off the bottom of the screen....and that WOULD NOT look vertically centered. Maybe you should read a book.


ardesigns -

top: -100px; /* half of height */
height: 200px; /* height of div */

I shouldn't have to put a height don't you think? Everyone has a different height depending on their screen resolution no? I think I should be able to just put 50% from top and thats it or something...that would mean 50% from top no matter what the resolution is....maybe I am wrong. I still cant get it to work..

I am trying to accomplish something like this.... http://antzmedia.com/sites/demo-div/div-at-the-center-of-screen.htm but with css. I have a mini site with everything within 1 table. I just want that one table to be vertically and horizontally centered like that example. Even when you change your browser size it stays centered in both directions.
Click to expand...

Seven minutes: 4-5 minutes searching and reading, 2-3 minutes coding up in simple text editor. Uploaded. Working here
 
Congratulations Jamie...I looked at the code it doesn't seem to complex but I still cant get it. Do you mind explaining what you did? You have 1 div called floater...and a div inside it called content. But whatis the overall idea behind it? Why "#floater {height:45%; margin-bottom:-150px; position:relative;}"?
and why "#content {clear:both; height:300px; position:relative; margin:0 auto; background-color:#FFCC66; width:70%; padding:20px;}?

I guess the whole idea is that they both are relative to something?? I just dont get it...just trying to totally understand this. thanks
 
djsound said:
Congratulations Jamie...I looked at the code it doesn't seem to complex but I still cant get it. Do you mind explaining what you did? You have 1 div called floater...and a div inside it called content. But whatis the overall idea behind it? Why "#floater {height:45%; margin-bottom:-150px; position:relative;}"?
and why "#content {clear:both; height:300px; position:relative; margin:0 auto; background-color:#FFCC66; width:70%; padding:20px;}?

I guess the whole idea is that they both are relative to something?? I just dont get it...just trying to totally understand this. thanks
Click to expand...

No. The content div is not inside the floater div. The floater div comes first - it's an empty div providing an invisible "bubble", if you will, above and behind the content div. They're relative to one another, as well as their parent. That's why setting the floater margin to -150px (half the height of content, if you didn't notice) affects the position of content. If you remove the top margin pice altogether, content sits just below it.

Take the code - every bit of it is right there in "view source" - and stick it in a plain text HTML editor - not Dreamweaver or other crap WYSIWYG editor. Play with it...break it, fix it again. Google things you see in the code but don't know. Find out how it works by actually doing it. It's the best way to learn.
 
hmmm...I wish I grabbed the code before you took it down =)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back