How to set page content to the middle of screen? [duplicate]

Question

Possible Duplicate:
How to align a <div> to the middle of the page

I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.

Answer 1

I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:

Markup:

<div></div> 

CSS:

div {     height: 200px;     width: 400px;     background: black;      position: fixed;     top: 50%;     left: 50%;     margin-top: -100px;     margin-left: -200px; } 

The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.

Edit: Credit goes to CSS-Tricks, where I got the original idea.

Answer 2

Solution for the code you posted:

.center{     position:absolute;     width:780px;     height:650px;     left:50%;     top:50%;     margin-left:-390px;     margin-top:-325px; }  <table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">       <tr>         <td>         <table width="100%" border="0">       <tr>         <td>         <table width="100%" border="0">         <tr>             <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>             <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>             <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>             <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>             <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>                 </tr>         </table>         </td>       </tr>       <tr>         <td>         <table width="100%" border="0">         <tr>             <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>             <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>             <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>             <td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>             <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>                 </tr>         </table>         </td>       </tr> </table> 

--

How this works?

Example: http://jsfiddle.net/953Yj/

<div class="center">     Lorem ipsum </div>  .center{     position:absolute;     height: X px;     width: Y px;     left:50%;     top:50%;     margin-top:- X/2 px;     margin-left:- Y/2 px; } 

• X would your your height.
• Y would be your width.

To position the div vertically and horizontally, divide X and Y by 2.