垂直对齐一个div使用vh

Question

我将我的包装的高度设置为100vh来填满整个屏幕，然后在包装器内我想要一个div设置为50％ - 垂直在中间和使用位置：relative和set top /转换（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以获得良好的跨浏览经验。