スクロールでビューポートの中央div

Question

ビューポートにヘッダーとフッターを中央に配置しようとしています（下のゲームのように）。コンテンツは垂直方向と水平方向にスクロールしますが、ヘッダーとフッターはビューポート上の同じ場所にとどまる必要があります。私は、次のCSSを使用して試してみた：

.BottomMenu { 
    background-color: #ADADAD; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
} 

しかし、これは垂直のみ粘着性のあるフッターを生成します。コンテンツがの方向に移動している間、その場にとどまることが必要です。

Answer 1

問題は、私は信じて、あなたのleftとright値です。以下のコードはこのトリックを行います。

body { 
 
    width: 5000px; 
 
    height: 5000px; 
 
} 
 

 
#element { 
 
    width: 75px; 
 
    height: 25px; 
 
    position: fixed; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translate(-50%, -100%); 
 
    border: solid orange 2px; 
 
}

<div id="element"></div>

translate方法は、それ自体に対する要素の位置を調整します。たとえば、width: 100pxの要素があり、transform: translateX(-50%)と設定されている場合は、要素が配置されている場所の左に要素50pxを移動します。そのような

top: 100%; 
left: 50%; 

作品...

_________________ 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|_________________| 
     |___e___| 

などのような

transform: translate(-50%, -100%) 

作品...

_________________ 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|  _______  | 
|____|___e___|____| 

Answer 2

これは、設定された幅を使用することによって達成することができます.BottomMenuクラスの場合

非常に基本的なJSFiddleを作成しました。固定幅、余白、および配置を使用してdivを中央に維持する方法を示しています。

#bottom-menu { 
    position:fixed; 
    bottom:0; 
    left:50%; 
    width:250px; 
    margin-left:-125px; 
    //optional 
    padding: 10px; 
    height:50px; 
    line-height:50px; 
}