Position item in the middle of the screen after scrolling

Question

My page is 2x the height of the screen (the size depends on another element on the page). I want to show an absolutely positioned SPAN in the middle of the screen, regardless of the scroll position.

I apply the following style when I click the button, however, if I scroll all the way down, the element is displayed at the top of the page, as it counts 50% of the top of the whole page.

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

How to place an element in the middle of the page based on the scroll potion at the click of a button?

Thanks.

Answer 1

Are you sure you do not want fixed positioning ?

, . , . , .

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

.

Answer 2

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

, max-height.

Answer 3

Try using the jQuery Center plugin .