• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 768
  • Last Modified:

Center website in borwser on any resolution

I am designing a website and would like the complete content of the website to be centered no matter what resolution the monitor is set to. I have been able to center it horizontally, but unable to vertically. EX: when I set screen to a high resolution, the content will be centered horizontally, but will still be located at the top of the browser.

Here is my current code.

<style type="text/css">
html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
#wrapper {margin:5 auto;vertical-align:middle;width:250px;}
</style>
</head>
<body onload="preloadImages();" bgcolor="#000000"><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table>

Please let me know what code I can use to accomplish my goal.

thanks
0
jfilmore3
Asked:
jfilmore3
  • 2
1 Solution
 
reece400Commented:
The simplest way would be to change it as below:


For more advanced, more current methods, see: http://www.webmasterworld.com/forum21/8204.htm
<style type="text/css">
html, body, #wrapper {margin:5;padding:0;height:100%;text-align:center;}
#wrapper {margin:5 auto;vertical-align:middle;width:250px;}
</style>
</head>
<body onload="preloadImages();" bgcolor="#000000"><center><table id="wrapper"><!-- ImageReady Slices (website.psd) --></table></center>

Open in new window

0
 
Lukasz ChmielewskiCommented:
this comes from another page but try it

of course the main page should contain
<div id="main">
something
</div>
body
{	
margin-top:	0px;	
margin-left: 0px;	
margin-right: 0px;	
margin-bottom: 0px;	
font-family: Tahoma, Arial, Helvetica, sans-serif;	
font-size: 9pt;	
background-color: black; 
width: 100%;
height: 100%;
}
 
#main
{
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -250px; /* make this half your image/element height */
	margin-left: -450px; /* make this half your image/element width */
	height: 500px;
	width: 900px;
	display: table;
	vertical-align: middle;
	border: 1px solid #7D5700;
}

Open in new window

0
 
reece400Commented:
Sorry,

Mis-read your question initially. To center Vertically, you place in in a table cell, and center that cell vertically, see below for more info:

http://www.cracked.com/forums/index.php?topic=17473.msg457703

Alternatly you could "Use a negative margin that is half the table height then relatively position the table 50% from the top of the viewport:

table {position: relative; height: 500px; top: 50%; margin-top: -250px;} " 

http://www.webmasterworld.com/forum21/11424.htm
0
 
AsishRajCommented:
you are using margin and padding in your css thats y its start at the top. take those out and insert  vertical-align: middle;
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now