在移动设备上的当前视口中心显示div

Question

如何在当前视口的中心显示div？我特别要求移动设备，因为它们是最成问题的。

例如，我有2个显示相同div的按钮。一个在页面顶部，一个在底部。页面的高度总共为2个视口高度。如果显示的div的填充顶部为40px，则在按下底部按钮时将不会显示div。显然，这种解决方案对于移动设备来说不够灵活。 你推荐什么解决方案？

图：如果我将padding-top设置为40px，绿色div将出现在页面顶部（如图所示）如果按下底部的红色按钮，绿色div也会出现在顶部，40px来自它。它甚至对用户不可见。它应该从第二个视口（用户看到的屏幕）的顶部看起来是40像素。我希望这有帮助。

Answer 1

一个简单的解决方案就是这样做 -

position: fixed;
top: 50%;
left: 50%;
/* bring your own browser transform prefixes */
transform: translate(-50%, -50%);

Answer 2

使用position: fixed。

function toggleDiv() {
    var div = document.getElementById('togglable');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

#container-parent {
  position: absolute;
  background-color: #eee;
  height: 95%;
  width: 90%;
  overflow: scroll;
}
#container {
  height: 500px;
}
#togglable {
  position: fixed;
  top: 10%;
  height: 80%;
  left: 25%;
  width: 50%;
  background-color: red;
}
#spacer {
  height: 90%;
  
}

<div id="container-parent">
  <div id="container">
    <input type=button onclick="toggleDiv()">
    <div id="togglable"></div>
    
    <div id="spacer">
      <!-- I don't know how you have got your buttons attached but the point is that `position: fixed` positions the togglable div relative to the viewport -->
    </div>
    <input type=button onclick="toggleDiv()">
  </div>
</div>

Answer 3

请使用display:flex作为主容器，样式表如下所示：

display:flex;
flex-direction: column; //to align them vertically
justify-content:center;
align-items: center; //centers out the whole elements horizontally.