Wedge

Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on March 26th, 2012, 08:47 PM

Title: How to center a div in the middle of the screen
Post by: MultiformeIngegno on March 26th, 2012, 08:47 PM
This is the site I'm building: compagniaoltreconfine.com / beta
As you can see its height is low. I'd like to have all the main div (#page) at the middle of the screen. Left, top, right, bottom should have the same distance from the borders of the content..
I tried with what I thought was the way to do that, i.e. position:absolute for #page and then top:50% and left:50% but... strangely it goes out of the screen.. tried with position:fixed too.. not good.. why it's not working?

The best thing would be to have #page in the middle of the screen if the whole content is displayed within the screen (without any scrolling). If its height is bigger than the screen it be would automatically set to the top of the screen (so without blank space at the top).. for example in this page on some screens has a height bigger than the screen: compagniaoltreconfine.com/beta/chi-siamo/

Don't know if I managed to explain me... :P
Title: Re: How to center a div in the middle of the screen
Post by: Nao on March 26th, 2012, 09:07 PM
If you don't care about ie6/7, use display:table-cell on the parent an vertical-align:middle. I do it in the login page right here ;)
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on March 31st, 2012, 07:46 PM
Uhm, ok.. I'm posting this after 3 days of tests here(http://compagniaoltreconfine.com/beta).. :^^;: :blush:
I want to vertical-align the main block (#page). I tried with EVERYTHING, with no results.. why this doesn't work? :sob:

Code: [Select]
body{
display:table;
vertical-align:middle;
}
#page {
vertical-align:middle;
display:table-cell;
}
Title: Re: How to center a div in the middle of the screen
Post by: Nao on March 31st, 2012, 08:34 PM
body
    .class1 (display: table)
       .class2 (display: table-row)
           .class3 (display: table-cell; vertical-align: middle)

That should work... You can usually do without the .class2, but afaik some browsers prefer to have table rows as well.

You can also set the display: table on body, but I've never done that.
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on March 31st, 2012, 08:40 PM
Should I change .class1/2/3 with the real classes (outer/container/inner)..? :unsure:
Title: Re: How to center a div in the middle of the screen
Post by: Nao on March 31st, 2012, 08:45 PM
Yes. What are you trying to center in the page?
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on March 31st, 2012, 11:18 PM
Quote from Nao on March 31st, 2012, 08:45 PM
Yes. What are you trying to center in the page?
The whole content (<div id="page">).. because the home page (for example) is "short" and with high res monitors you have a lot of free space at the bottom.. with a vertical align the free space will be equally divided at the top and at the bottom. :)
Title: Re: How to center a div in the middle of the screen
Post by: Nao on March 31st, 2012, 11:53 PM
Doesn't 'margin: auto 0' work on body, already...?
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on March 31st, 2012, 11:55 PM
Quote from Nao on March 31st, 2012, 11:53 PM
Doesn't 'margin: auto 0' work on body, already...?
Uhm, no.. :(
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 2nd, 2012, 05:22 PM
I'm starting to wonder if you're not having another problem that isn't related to the basics of CSS alignment... :-/
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 2nd, 2012, 08:36 PM
What? :(
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 2nd, 2012, 09:22 PM
Try it this way...

Code: [Select]
body {
display: table;
vertical-align: middle;
height: 100%;
}
#page {
display: table-cell;
vertical-align: middle;
height: 100%;
}

If it doesn't work, try adding a div in between those two. Set the same elements, but use table-row instead.
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 09:55 AM
Seriously, I think it's the missing height: 100% that changed the deal...
(If it's not working, trying putting it on the 'html' tag instead, or in addition to 'body', but it shouldn't fail.)
Posted: April 3rd, 2012, 09:38 AM

Hmm, got it to align by setting a height: 1000px on the body and a width: 100% on it as well (and text-align: center)...
Problem is, I couldn't get to make it work by setting height: 100%, it needed a pixel value... Which is bad for compatibility.
Posted: April 3rd, 2012, 09:42 AM

Crap, I can't get it to work.
Okay, then let's just go back to the old faux column style... A negative margin.
I don't remember the exact technique so I'll just google it :P
Posted: April 3rd, 2012, 09:45 AM

Scratch that, it works perfectly. It's just that you REALLY need to add a wrapper div...

body, html, #wrapper { width: 100%; height: 100% }
#wrapper { display: table }
#main { display: table-cell; vertical-align: middle }

That's all you need really. The rest is about fixing the margins on your #main element. CSS just won't let me apply a display rule to the body, which is why it failed in the first place. Tested on your site, works fine...
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 12:06 PM
Thanks Nao, you are really kind!
I'll try it when I go back home :))
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 02:02 PM
I'm ashamed... :sob:
I added your CSS and the wrapper <div>, everything is still in the same position.. :-/

Don't ban me! :lol:

The site has the code added.
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 02:15 PM
Well... It's vertically aligned for me?! (In Opera.)
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 02:25 PM
:o :o not for me (tried also with Opera 11.62)
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 02:29 PM
<sigh>...

Really dunno what to say. Works for me in 11.62... :-/

Okay, is your site height fixed, and is it going to remain fixed (in pixels)?
If yes, it's best to implement centering via a negative margin.
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 02:35 PM
Quote from Nao on April 3rd, 2012, 02:29 PM
<sigh>...

Really dunno what to say. Works for me in 11.62... :-/
Mistery.. :ph34r: :(
Quote from Nao on April 3rd, 2012, 02:29 PM
Okay, is your site height fixed, and is it going to remain fixed (in pixels)?
If yes, it's best to implement centering via a negative margin.
Unfortunately not.. :(
I try another bit, then I'll give up and use position:absolute + negative margins on home page (only) + media queries to avoid upper page being cropped in low resolutions..
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 02:57 PM
Does this work for you?
http://pmob.co.uk/pob/hoz-vert-center2.htm
Uses the exact same technique (display:table)...
Posted: April 3rd, 2012, 02:55 PM

Hey. Was looking at your code, and... Where's the table-cell definition on #page? Where's the vertical-align?
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 03:41 PM
Quote from Nao on April 3rd, 2012, 02:57 PM
Hey. Was looking at your code, and... Where's the table-cell definition on #page? Where's the vertical-align?
Yay!! Now it finally works!!!!! :cool: :cool: :cool:
I need to recover the Nao statue I did some time ago! :D :D

Really latest question: now that everything works, the only thing that remains is the horizontal align :P
I tried with a text-align:center on #page but nothing.. I can't use a position:absolute;left:50% + negative margins because the vertical align wouldn't work anymore...
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 03:50 PM
P.S.: I can get rid of the width:100% on body, html, #wrapper, it still works :)
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 03:53 PM
Quote from MultiformeIngegno on April 3rd, 2012, 03:41 PM
Quote from Nao on April 3rd, 2012, 02:57 PM
Hey. Was looking at your code, and... Where's the table-cell definition on #page? Where's the vertical-align?
Yay!! Now it finally works!!!!! :cool: :cool: :cool:
There weren't a lot of lines to copy, really... You could have been careful :lol:
Quote
Really latest question: now that everything works, the only thing that remains is the horizontal align :P
I tried with a text-align:center on #page but nothing.. I can't use a position:absolute;left:50% + negative margins because the vertical align wouldn't work anymore...
Hmm, I think it would still work, but if you have a constant width for your site (which is required to do negative margins), you could just as well use other techniques...
No, text-align:center would be enough but you can also simply try "margin: 0 auto" on the #page (or the #wrapper). Make sure whatever gets the margin isn't set to a width of 100%, though.
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 03:55 PM
'margin:0 auto' on #wrapper did the trick!! :cool: :cool: :cool:
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 04:05 PM
That'll be $200! Check or credit card?
Title: Re: How to center a div in the middle of the screen
Post by: Arantor on April 3rd, 2012, 04:37 PM
And this is why I don't do CSS, :lol:
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 3rd, 2012, 05:57 PM
CSS inheritance is fun... Just on Wedge.org I've been having trouble with Wine all day. Well, not that much but it annoys me a bit that when I do a change on Weaving, I don't always think of the consequences on inherited skins... Silly me. Although one of the changes was actually for the better, I think.
Title: Re: How to center a div in the middle of the screen
Post by: MultiformeIngegno on April 3rd, 2012, 10:18 PM
Quote from Nao on April 3rd, 2012, 04:05 PM
That'll be $200! Check or credit card?
Ninja mode activated :ph34r: :ph34r:
Title: Re: How to center a div in the middle of the screen
Post by: nend on April 23rd, 2012, 05:51 PM
I already knew the answer to this one, too late I guess. Also on margins you don't need the 0 in there, just the auto. ;)
Title: Re: How to center a div in the middle of the screen
Post by: Nao on April 23rd, 2012, 06:00 PM
Yeah you don't, but it's cleaner to add it because vertical margins don't do anything when you set them to auto. 'margin: auto' might imply 'center horizontally and vertically' ;)
Title: Re: How to center a div in the middle of the screen
Post by: nend on April 23rd, 2012, 06:21 PM
Quote from Nao on April 23rd, 2012, 06:00 PM
Yeah you don't, but it's cleaner to add it because vertical margins don't do anything when you set them to auto. 'margin: auto' might imply 'center horizontally and vertically' ;)
I never really thought of that, but I haven't seen a browser that did it both ways when just set to auto. Your right though it is better to set it that way, right now it doesn't have any effect setting it the other way, but maybe in the future it may. It is better to be compliant. ;)

*edit
Well in fact I have seen it done both ways, but this is when your in a container and a height is set for the container you are in. When a height isn't set it then it isn't a problem. :D