departedmind Posted January 19, 2009 Share Posted January 19, 2009 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.... Quote Link to comment Share on other sites More sharing options...
departedmind Posted January 21, 2009 Author Share Posted January 21, 2009 Anyone Quote Link to comment Share on other sites More sharing options...
Zane Posted January 21, 2009 Share Posted January 21, 2009 if you use margin:0px auto; on a div it will be centered. Quote Link to comment Share on other sites More sharing options...
departedmind Posted January 21, 2009 Author Share Posted January 21, 2009 What I mean is vertical Center not horizontal center... Quote Link to comment Share on other sites More sharing options...
dropfaith Posted January 21, 2009 Share Posted January 21, 2009 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Quote Link to comment Share on other sites More sharing options...
departedmind Posted January 21, 2009 Author Share Posted January 21, 2009 I have seen that does not seem to work. I searched and tried a lot before posting here. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted January 21, 2009 Share Posted January 21, 2009 http://pmob.co.uk/pob/hoz-vert-center.htm works ive tested it Quote Link to comment Share on other sites More sharing options...
departedmind Posted January 22, 2009 Author Share Posted January 22, 2009 ok, thanks i will give it a try Quote Link to comment Share on other sites More sharing options...
glenelkins Posted January 22, 2009 Share Posted January 22, 2009 it should work because the element is set to display:table; Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 23, 2009 Share Posted January 23, 2009 <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. :-\ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.