html - 视口(viewport)中的 div 居中并滚动

Question

我试图将页眉和页脚置于视口(viewport)的中心(如下面的游戏)。内容垂直和水平滚动，但页眉和页脚应保留在视口(viewport)上的同一位置。我尝试过使用以下 CSS:

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

但这会产生一个仅垂直粘性的页脚。当内容向任何方向移动时，我需要它保持在该位置。

Answer 1

我认为问题在于您的左和右值。下面的代码就可以解决这个问题。

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___|____|