Центр 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; 
}