html - 使用 vh 垂直对齐 div

Question

我将包装器的高度设置为 100vh 以填满整个屏幕，然后在包装器内部我希望将一个 div 设置为 50% - 垂直位于中间并使用 position: relative 并将顶部/转换 (translateY) 设置为50%。它在我的台式电脑上运行完美，但在我的 macbook(均运行 Chrome)上显示时，它无法正确显示并且被“推”到屏幕高度的 30%。我究竟做错了什么 ？这是我的代码:

#main-1 {
    width: 100%;
    height: 100vh;  
    background-image: linear-gradient(to right, #e1484f 50%, #f9f9f9 50%);
}
#info-left {
    width: 20%;
    height: 300px;
    padding-left: 10%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: left;    
    text-align: center;
    color: #FFF;
}

Answer 1

您可以这样设置内部 div:

top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

它将水平和垂直居中您的 div。

不要忘记 -webkit 以获得良好的跨浏览体验。