« Different Keys (touch screen keyboards) for different form e…
How to center a div in the middle of the screen
French election »

MultiformeIngegno

  • Posts: 1,337
How to center a div in the middle of the screen
« on March 26th, 2012, 08:47 PM »Last edited on March 31st, 2012, 07:46 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

Nao

  • Dadman with a boy
  • Posts: 16,082

MultiformeIngegno

  • Posts: 1,337
Re: How to center a div in the middle of the screen
« Reply #2, on March 31st, 2012, 07:46 PM »Last edited on March 31st, 2012, 07:52 PM
Uhm, ok.. I'm posting this after 3 days of tests here.. :^^;: :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;
}

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: How to center a div in the middle of the screen
« Reply #3, 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.

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,082

MultiformeIngegno

  • Posts: 1,337
Re: How to center a div in the middle of the screen
« Reply #6, 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. :)

Nao

  • Dadman with a boy
  • Posts: 16,082

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,082

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: How to center a div in the middle of the screen
« Reply #11, 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.
Re: How to center a div in the middle of the screen
« Reply #12, 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...

MultiformeIngegno

  • Posts: 1,337
Re: How to center a div in the middle of the screen
« Reply #14, 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.
« Different Keys (touch screen keyboards) for different form e…
French election »