Center Div im Ansichtsfenster mit Bildlauf

Question

Ich versuche, eine Kopf- und Fußzeile im Ansichtsfenster zu zentrieren (wie das Spiel unten). Der Inhalt scrollt sowohl vertikal als auch horizontal, aber die Kopf- und Fußzeile sollte an der gleichen Stelle im Ansichtsfenster bleiben. Ich habe versucht mit folgenden CSS:

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

Aber das erzeugt eine Fußzeile, die vertikal nur klebrig ist. Ich brauche es, um an dieser Stelle zu bleiben, während sich der Inhalt in irgendeiner Richtung bewegt.

Answer 1

Die Frage, glaube ich, ist Ihr left und right Werte. Der folgende Code wird den Trick machen.

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 Die Methode stellt die Position des Elements in Bezug auf sich selbst. Wenn Sie beispielsweise ein Element mit einer width: 100px und transform: translateX(-50%) hätten, würde das Element 50px nach links verschoben, unabhängig davon, wo es positioniert ist.

top: 100%; 
left: 50%; 

Werke wie so ...

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

und

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

Werke wie so ...

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

Answer 2

Dies kann durch eine Reihe Breite erreicht werden für die .BottomMenu Klasse.

Ich habe eine sehr einfache JSFiddle erstellt, die eine feste Breite, Ränder und Positionierung zeigt, um die div zentriert zu halten.

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