html - 在屏幕中心对齐时滚动无法正常工作(使用转换)

Question

我试图在屏幕中央对齐一个 div。在我将屏幕变小之前，代码一直有效，然后滚动无法正常工作，并且它切断了居中组件的顶部(当居中组件高度等于或小于屏幕大小时)

关于解决方案的任何想法？!我很乐意使用任何其他方法(不进行转换)但是我没有使用任何方法将 div 放在屏幕中央)

.LoginContainer {
  background-color: $base;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.LoginBox {
  margin: 1rem;
  padding: 5rem;
  max-width: 30rem;
  width: 60%;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: white;
}

<div class="LoginContainer">
  <div class="LoginBox">
      TEST
  </div>
</div>

codesandbox.io/embed/suspicious-bird-hzood我也在这里重新创建了这个问题。如您所见，当屏幕尺寸的高度较小时，白色组件会被剪裁掉。

Image of the screen when the top part is clipped

Image of the regular screen

Answer 1

简单地居中子组件是行不通的:

.LoginContainer {
    background-color: $base;
    ...
    display: flex;
    justify-content: center;
    align-items: center;

}