8

Possible Duplicate:
center div vertically in a % height div?

Hey all, i have a page with some content in it. I need to center the whole thing so that in large resolutions, the content is always in the middle of the page. Two things. first is, if the resolution is small, i want at the very least the content to stop when it gets to the top of the page. I tried doing top:50% height: 680 margin-top:-340px. The problem is that in a smaller resoultion the content goes flying off the page. How do i do this? The nav is in an absolute div at the top, this too has to be centered vertically. Thanks for your help all!

er

Community
  • 1
  • 1
Damien
  • 4,093
  • 9
  • 39
  • 52

6 Answers6

10

It's possible to vertically center a <div> within another <div> using only css and without explicitly specifying a height or a negative top margin. The one major drawback of the following technique is that { display: table; } is NOT supported in Internet Explorer < 9.

If this is your markup:

<div class="wrapper">
    <div class="content">...</div>
</div>

The CSS to get the inner <div> to be centered is:

.wrapper { display: table; }
.wrapper .content { display: table-cell; vertical-align: middle; }

This works by essentially emulating the naitive layout behavior of <table> elements.

Lev
  • 801
  • 5
  • 5
  • Tried this. It didn't center the content vertically and broke the horizontal center. Any other ideas? – Damien Apr 21 '11 at 17:05
1

try something like this: 

<figure class='logo'>
<span></span>
<img class='photo'/>

and css:

.logo {
display: block
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }

.logo * {
display: inline-block;
height: 100%
vertical-align: middle; }

.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
Obi-wan
  • 184
  • 1
  • 1
  • 6
0

You could use CSS3 media queries to set different sizes for the different size screen resolutions. This would only work on newer browsers but is easy to implement.

The second thing you could do would be to have javascript check the screen size and adjust accordingly.

Seth
  • 6,240
  • 3
  • 28
  • 44
0

Out of curiousity, why are you using a top and a negative margin? (margin-top: -340px)

So is it just resolutions where 340px is more or near half the maximum (a la 800x600px)?

Id suggest trying something like setting one of the divs to have a min-height. So if you have a wrapper div and place it in there, then it should be ok.

<div id="wrapper">
    <div id="centeredDiv" style="position: relative; top50%;>
    </div>
</div>

This will force the <div id="wrapper"></div> to be the parent div of <div id="centeredDiv"></div> and the position: relative will make it so the parent div is treated like the open space, so 50% of its total height will be used. Doing this you could now use min-height to force the page to scroll, instead of fly off the top of the browser.

Aleski
  • 1,402
  • 5
  • 16
  • 30
  • I was just trying to center the whole page. I measured it from top to bottom and 680 is how high it is. Here's the page code:http://pastebin.com/G6JtJBzk – Damien Apr 21 '11 at 15:21
  • That `top` and negative `margin-top` is a way to vertically center content with a fixed height. It breaks when the browser height is smaller than `680px`, which is what I think the OP is asking about. – Blender Apr 21 '11 at 15:21
  • exactly, it breaks. Unfortunately scrolling is not an option. – Damien Apr 21 '11 at 15:49
0

Instead of making a complicated stylesheet or JavaScript code, why not just find the minimum resolution that your site works with? Users with smaller screen sizes would just see scrollbars:

body {
  min-height: 700px;
  min-width: 700px;
  overflow: auto;
}

It's not really a solution, but that's what I would do. Also, have you looked at the other ways to vertically-center a <div>? I'll post links to a few methods.

Blender
  • 289,723
  • 53
  • 439
  • 496
0

Do the floater trick - insert an empty div above the content, set height to 50% and margin-bottom to the negative content height (content height needs to be fixed).

<div id="float">
    <div id="content">
       Content goes here
    </div>
</div>

#float{
    float:left; 
    height:50%; 
    margin-bottom:-200px;
}

#content {
    clear:both; 
    height:200px; 
    position:relative;
}
ezmilhouse
  • 8,933
  • 7
  • 29
  • 38
  • i'm a little confused here. How would this work with the code im using? http://pastebin.com/G6JtJBzk – Damien Apr 21 '11 at 15:48
  • ok... tried that and that did not work. here's the code that i tried... http://pastebin.com/wUyRA9Dx – Damien Apr 21 '11 at 16:00
  • find a detailed description of various ways here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – ezmilhouse Apr 21 '11 at 16:06
  • I tried method#4 and it worked, but the same thing happens on smaller resoultion screens... the content goes off the window. What next? – Damien Apr 21 '11 at 16:58