移动设备上的垂直对齐

-1

我在垂直对齐移动设备上的SVG时遇到问题。我已经在iPhone 5s，6s和iPad Air 2上进行了测试。它似乎可以在Chrome响应模式下正常工作，但不适用于实际的移动浏览器。我无法确认它是否适用于Android，因为我没有。移动设备上的垂直对齐

http://accoutrements.studio/

下面是它是如何寻找我的iPhone - https://i.imgur.com/GnRSEmn.png

应垂直和水平在页面的中心对齐。它在iOS Safari上显示略微偏离中心（垂直）。有什么我可以改变的代码或这是一个Safari错误？

来源

2017-09-21 Jacob

svg正在按照margin-top定位：50vh。试试这个：

.accoutrements { 
top: 50%; 
transform: translateY(-50%); 
position: absolute; 
width: 100%; 
cursor: pointer; 
}

来源

2017-09-21 16:09:42 SLL

这似乎没有工作。我有机会在三星Galaxy S7 Edge上测试我的原始代码，并且工作正常。它必须是iOS Safari问题！谢谢。 – Jacob

iOS safari确实存在与vh单元有关的问题，但您可以跨设备和浏览器居中。如果您不想使用Flexbox，则需要使用top：50％，这已经在您的代码中。看起来您的代码中可能存在其他行，导致跨场景的意外行为。从我能看到devtools中我会：删除位置：相对和你的媒体位置：继承，左：10％，显示：块。添加保证金：自动和显示：为svg.logo块不只是在您的媒体。您可能还想删除主体上的默认边距以防止溢出。 – SLL

移动设备上的垂直对齐

回答

相关问题