?
Solved

div vertical centering

Posted on 2013-01-31
7
Medium Priority
?
232 Views
Last Modified: 2013-02-01
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

0
Comment
Question by:yaron89
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 11

Accepted Solution

by:
mcnute earned 1500 total points
ID: 38840371
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
 
LVL 62

Expert Comment

by:Julian Hansen
ID: 38840412
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38840446
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 

Author Comment

by:yaron89
ID: 38840504
mcnute solution work. I prefer it was javascript.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38840513
YEAH!!!!
0
 
LVL 62

Expert Comment

by:Julian Hansen
ID: 38840605
Why use jscript when you can do it with CSS - cannot see the logic in that at all?
0
 

Author Comment

by:yaron89
ID: 38840628
I tested your answer and it didn't work for me nor in normal screen and not in fullscreen mode.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question