Position element in the middle of the screen after scrolling

Question

my page is 2x the height of the screen (size varies depending on other item on the page). i want to show an absolutely positioned SPAN in the middle of the screen regardless of scroll position.

i apply the following style on button click, however if i scroll all the way down, the element shows up at the very top of the page since it counts the 50% from the top of the entire page.

.Centered
{
    width:100%;
    position:absolute;
    top:50%;
    left:45%;
}

how do i position the element in the middle of the page based on the scroll potion at the time of a button click?

Thank you.

Answer 1

.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

This way the trick becomes finding a suitable value for max-height.

Answer 2

Are you sure you don't want fixed positioning?

Absolute positioning positions an item within the context of a page, so it will scroll up and down with the page. Fixed positioning positions an item within the context of the viewport, so it does not move with the page. Instead, it stays in the same position no matter how you scroll.

.Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

The menu on this page is a good example of fixed positioning.

Answer 3

@John: margin-height css rule doesn't exists (http://reference.sitepoint.com/css).

@rm: position:fixed would solve your problem with scrolling. If you have a dynamic content, then you will have to intervine with javascript for the height part...

Answer 4

Try using the jQuery Center Plugin.