Question: I need to make an element's margin to expand to make it centered on the page. 

The elements 1 and 3 should be stuck to top and bottom, respectively.  

Element 2 have a fixed height and should be centered in the page.

I'm not sure if I'm explaining this clear enough so I drew a picture:

![enter image description here](https://i.stack.imgur.com/9PXvO.png)

Answer: 
Fix element 1 and element 3 to the top and the bottom of the page, respectively, using absolute positioning. Then absolutely position element 2's top to `50%` and set a negative top margin of half its height:

```css
#top, #middle, #bottom { position: absolute; left: 0; right: 0; }
#top { top: 0; }
#middle { top: 50%; margin-top: -25px; height: 50px; }
#bottom { bottom: 0; }

```

**[Try it.](http://jsfiddle.net/4CR8z/)**
Alternatively, you could do something like this: [Example](http://jsfiddle.net/ctEXZ/)

```
body, html {
    height: 100%;
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
header, div, footer {
    width: 100%;
    display: table-row;
}
header {
    height: 50px;
}
footer {
    height: 50px;
}

```