Html 使用vh垂直对齐div 我将包装的高度设置为100VH，填充整个屏幕，然后在包装器中，我想要一个div被设置为50%，在中间垂直，使用的位置：相对和设置顶部/变换（转换）到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; }

您可以通过以下方式设置内部div：

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

它将水平和垂直居中于你的div

---

不要忘了使用

-webkit

，这是一个很好的跨浏览器体验。

这只是增加跨浏览器支持并水平对齐，这不是我想要的。在我写这篇文章的时候，我想把它垂直对齐到中间，我的代码在我的桌面电脑上运行，但不是我的Laptopubmp，仍然在寻找解决方案！