Question: > 
> **Possible Duplicate:**  
> 
> [How to align a <div> to the middle of the page](https://stackoverflow.com/questions/953918/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: 
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](http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/), where I got the original idea.
**HTML**

```
<!DOCTYPE html>
<html>
    <head>
        <title>Center</title>        
    </head>
    <body>
        <div id="main_body">
          some text
        </div>
    </body>
</html>

```

**CSS**

```
body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}​

```

**JS ( jQuery )**

```
$(function(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var main = $("#main_body");    
    $("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
                          left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});

```

See example [here](http://jsfiddle.net/darkking/z8pTa/)