davej Posted October 21, 2013 Share Posted October 21, 2013 Hmmm... what is the trick to vertically centering a wrapper? Link to comment Share on other sites More sharing options...
Ingolme Posted October 21, 2013 Share Posted October 21, 2013 There's a method involving absolute positioning, and the other thing is using percentage heights and margins. Both methods require the container to have a set height. Using absolute positioning. The drawback is that if the window gets smaller than 800x600 then the content is outside the viewable area and impossible to get to. I guess setting a min-width and min-height to the body would fix that. html, body {margin: 0;height: 100%;}#box { /* Top left corner in the middle of the screen */ top: 50%; left: 50%; /* Set size */ width: 800px; height: 600px; /* Move the box halfway left and halfway up */ ; margin-top: -300px;} Using percentages Decide a percentage height for your box, divide the remaining percentage by 2 to determine the offset from the top. html, body { margin: 0; height: 100%;}#box { width: 960px; /* Use any width you want */ margin: 0 auto; margin-top: 10%; height: 80%;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 21, 2013 Share Posted October 21, 2013 This what i use to used for pop ups the size of div can be changed, and to will always adjust and self centre itself, if this is an option for you. remove js and remove code for semi transparent background <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function popup(popup_name) {popup_elem=document.getElementById(popup_name);popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';}/*--*//*]]>*/</script><style type="text/css">#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}#firstPopupDiv {width:100px;height:100px;background-color:red; overflow:hidden;}</style><!--[if IE]> <style>#outer {filter: alpha(opacity = 75);} </style><![endif]--><!--[if lte IE 7]> <style> /* centering for ie6/ie7 */ .middle { position:absolute; top:50%; left:50%; height:auto; z-index:999;} .inner { position:relative; top:-50%; left:-50%; } </style><![endif]--></head><body><h1 style="float:left;"><a href="#" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1><div id="outer" onclick="popup('outer')"><div class="middle"><div class="inner"><div id="firstPopupDiv"> <p>You are here.</p></div></div></div></div></body></html> Link to comment Share on other sites More sharing options...
davej Posted October 22, 2013 Author Share Posted October 22, 2013 Oh my! Thanks! I will test these out. Vertical centering is something I just haven't had much need to do, but now I have a special situation and I see that it is a little tricky. I noticed that googling brings up various blogs/articles on this topic. Link to comment Share on other sites More sharing options...
lovewebdesign Posted October 23, 2013 Share Posted October 23, 2013 (edited) If you don't have to support older browsers, you can use a display box. I have the following class: .vertically_centered {display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;} Then put just about anything inside there. Since you want the "wrap" div vertically centered, try assigning the vertically_centered class to your body element. Edited October 23, 2013 by lovewebdesign Link to comment Share on other sites More sharing options...
davej Posted October 23, 2013 Author Share Posted October 23, 2013 I was just reminded about this new "box" but I don't know if it would be a good idea for my entry page usage. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now