Jump to content

margin: auto auto?


davej

Recommended Posts

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

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

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

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 by lovewebdesign
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...