div vertical centering

How can I set the following pageContainer to be vertically centered both on normal screen and fullscreen(F11) ?

<head>
<style>
.pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963;
height: 800px;
margin: 0px auto;
background-color:#efefef;
padding:0px;
text-align: center;
}
</style>
</head>
<body bgcolor="#999999">
<div class="pageContainer">
</div>
</body>
</html>

Open in new window

yaron89Asked:
Who is Participating?
 
mcnuteCommented:
try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
#pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963px;
height: 400px;
margin: 0px auto;
background-color:#efefef;
padding:0px;
text-align: center;
position:relative;
}
</style>

</head>
<body bgcolor="#999999">
<div id="pageContainer">
</div>
<script>
function initialize() {
   var divH = $('#pageContainer').innerHeight() / 2;
   var pageH = $(window).innerHeight() / 2;
   console.log(divH+'-'+pageH);
   $('#pageContainer').css({'top': pageH-divH});
}

initialize();

$(window).on('resize',function(){
  initialize();
});
    
</script>
</body>
</html>

Open in new window

0
 
Julian HansenCommented:
How about something like this
<!doctype html>
<html>
<head>
<style>
.outerContainer {
	padding-top: 25%;
}
.pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963px;
height: 800px;
margin: -400px auto 0 auto;
background-color:#efefef;
padding:0px;
text-align: center;
}
</style>
</head>
<body bgcolor="#999999">
<div class="outerContainer">
	<div class="pageContainer">
	</div>
</div>
</body>
</html>

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
With either of the solutions above, you'll also need to set your body element to 100% width and height. I usually do the same the for html element for good measure.
html, body { width: 100%; height: 100%; }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
yaron89Author Commented:
mcnute solution work. I prefer it was javascript.
0
 
mcnuteCommented:
YEAH!!!!
0
 
Julian HansenCommented:
Why use jscript when you can do it with CSS - cannot see the logic in that at all?
0
 
yaron89Author Commented:
I tested your answer and it didn't work for me nor in normal screen and not in fullscreen mode.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.