我试图在屏幕中央对齐一个 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 我也在这里重新创建了这个问题。如您所见,当屏幕尺寸的高度较小时,白色组件会被剪裁掉。
最佳答案
简单地居中子组件是行不通的:
.LoginContainer {
background-color: $base;
...
display: flex;
justify-content: center;
align-items: center;
}
关于html - 在屏幕中心对齐时滚动无法正常工作(使用转换),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56547871/