Question

我将包装器的高度设置为100vh以填满整个屏幕，然后在包装器内部我希望div设置为50％ - 垂直位于中间并使用位置：relative和set top / transform （translateY）到50％。它在我的桌面计算机上完美运行，但是当我在我的macbook上显示（都运行Chrome）时，它没有正确显示并被推送到＃34;可能是屏幕高度的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以获得良好的跨浏览效果。

使用vh垂直对齐div

1 个答案: