Vertically centering a Div in any screen resolution

[departedmind]

Hello,

Is there any way to vertically center a DIV within a browser window in any screen resolution?

 

I tried by keeping a main container DIV to 100% height and width, made its position fixed and kept child container inside it (saw an example while searching in google), It seems to work but the problem is when i resize my browser scrollbar does not seem to show.

 

Any solution....

[departedmind]

Anyone

[Zane]

if you use

margin:0px auto;

on a div it will be centered.

[departedmind]

What I mean is vertical Center not horizontal center... 

[dropfaith]

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[departedmind]

I have seen that does not seem to work. I searched and tried a lot before posting here.

[dropfaith]

http://pmob.co.uk/pob/hoz-vert-center.htm

 

works ive tested it

[departedmind]

ok, thanks i will give it a try

[glenelkins]

it should work because the element is set to display:table;

[TheFilmGod]

<div id="expand">
  <div class="middle"><div class="inner">
      Contents!
  </div></div>
</div>

 

* Modern Browsers, not IE7 */

html>/**/body #expand {
position:fixed;
top:0;
left:0;
width: 100%;
height: 100%;
}
html>/**/body #expand .middle {
display:table;
margin: 0 auto;
height: 100%;
}
html>/**/body #expand .inner {
vertical-align:middle;
display:table-cell;
}

/* Only IE7 */
*:first-child+html #expand {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*:first-child+html #expand .middle {
position:absolute;
top:50%;
left: 50%;
}
*:first-child+html #expand .inner {
position:relative;
top:-50%;
left:-50%;
}
*:first-child+html #expand .main {
margin: -3px 0 0 0;
}

 

Css hacks are necessary for IE7. Conditional stylesheets will not work as a subsitute. I have tried it before, but for some reason IE7 conditional stylesheets trigger an unkown bug that causes height: auto; to be inherited, thus creating issues.  :-\