center wrapper div in the middle of website

i am creating a portfolio website and want a div to be

width: 800px
height: 700px

what i am wanting to do is have the div be centered in the screen on all four sides
no matter what screen resolution someone is using.

this will make the right and left sides the same spacing
and the top and bottom sides the same spacing.

i will then put my info inside the wrapper.

thanks
webdottAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
HagayMandelConnect With a Mentor Commented:
The original question was for a solution to center a div in a screen; The nature of the question indicates that the div is SMALLER than the screen!, and to that you were given a solution!
Now you are asking for solution to RESIZE a div (upon resizing the screen) and to center it in the resized screen, and this is a different question!
For that you need to make a modification of the code above:

HTML:

<body onload="centerMe()" on resize="centerMe()">

Javascript:

Replace the values (%) in the code with your values!

mydiv.style.height=pageHeight*25/100 +'px';//Set your div height to 25% of screen width
mydiv.style.width=pageWidth*45/100+'px'; //Set your div width to 45% of screen width


And
0
 
webdottAuthor Commented:
i came up with this code, it works on the left and right, but not top and bottom
it is located at the top of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body style="background-color: #A7C6A6">
<div align="center" style="margin-bottom:auto; margin-top:auto; margin-left:auto; margin-right:auto; width:800px; height:600px; background-color:#FFFFFF">
				test this out</div>
</body>

</html>

Open in new window

0
 
sscottiCommented:
See if this helps.


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

Not sure if this works in all browsers.  It is relatively easy to do with tables but this doesn't validate in CSS.

If you use jQuery you might check this out:

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
HagayMandelCommented:
Use the following JavaScript on the body onLoad event:

HTML:

<body onload="centerMe()">

Javascript: (REPLACE "myDiv" WITH YOUR DIV ID!!

<script type="text/javascript" language="javascript">
function getDocumentHeight() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
        Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
        Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    );
}
function getDocumentWidth() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
        Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
        Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
    );
}
function centerMe() {
// Find page width and height
      pageHeight=getDocumentHeight();
      pageWidth=getDocumentWidth();
//Move the div
      var mydiv = document.getElementById("myDiv");
      mydiv.style.height=300 +'px';//Set your div height
      mydiv.style.width=500+'px'; //Set your div width
      var divWidth = parseInt(mydiv.style.width);
      var divHeight=parseInt(mydiv.style.height);
      var horzSpace=pageWidth-divWidth;
      var vertSpace=pageHeight-divHeight;
      mydiv.style.position = "absolute";
      mydiv.style.marginLeft = horzSpace/2 + 'px';
      mydiv.style.top= vertSpace/2 +'px';
      }
</script>
0
 
webdottAuthor Commented:
sorry but none of these worked for me.
0
 
HagayMandelCommented:
It sure does!
Check how you apply the code, and don't forget to replace 'myDiv'  to the ID of your div, IN 2 OCCURRENCES!
0
 
webdottAuthor Commented:
if you are to shrink the browser window, the div should float to keep it in the middle

this works to at first center it, but it does not allow to keep center when shrinking the browser window.

thanks.
0
 
webdottAuthor Commented:
i am looking for it do act like this page:

http://www.julikadesign.com/

if you have your browser maximized - it is in the center
if you minimize and adjust your browser - it centers

thanks
0
 
webdottAuthor Commented:
sorry for the delay, been out for a while on a bad note.

sorry for the confusion, the original question was meant to be like the website example.

thanks for all your help.
0
 
HagayMandelCommented:
The div in the linked site, DOES NOT ADJUST to screen size, it remains the same in size!
For achieving that, the first solution is good.
0
 
HagayMandelCommented:
My first solution.
0
 
webdottAuthor Commented:
the post has no accept as solution?? is something wrong with ee?
0
 
webdottAuthor Commented:
thanks
0
All Courses

From novice to tech pro — start learning today.