スクロール後の画面の中央に位置する要素

Question

マイページは画面の2倍です（ページの他の項目によってサイズが異なります）。スクロール位置に関係なく、画面の中央に絶対的に配置されたSPANを表示したい。

ボタンクリックで次のスタイルを適用しますが、全部スクロールすると、ページ全体の上部から50％をカウントするため、要素はページの最上部に表示されます。

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

ボタンのクリック時にスクロールポーションに基づいてページの中央に要素を配置するにはどうすればよいですか？

ありがとうございます。

Answer 1

fixed positioningは本当に不要ですか？

絶対配置ではページのコンテキスト内に項目が配置されるため、 はページを上下にスクロールします。固定ポジショニングは、アイテムをビューポートのコンテキスト内に配置するため、ページとともに移動しません。代わりに、スクロールしても同じ位置にとどまります。

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

メニューon this pageは、固定配置の良い例です。

Answer 2

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

このようにして、トリックは最大高さに適した値を見つけるようになります。

Answer 3

jQuery Center Pluginをお試しください。