モバイルデバイスでの垂直方向の整列

Question

モバイルデバイスでSVGを垂直方向に整列させる際に問題があります。私はiPhone 5s、6s、iPad Air 2でテストしました。これはChrome Responsive Modeでは完全に機能しているようですが、実際のモバイルブラウザでは機能していないようです。私はAndroidを持っていないので、それがAndroid上で動作しているかどうかは確認できません。

http://accoutrements.studio/

ここでは私のiPhone上で見ている方法です - https://i.imgur.com/GnRSEmn.png

これは、垂直方向と水平方向のページの中央に整列されなければなりません。これは、iOS Safariで中心から少しずれて表示されます（垂直方向）。コードで変更できるものはありますか、これはSafariのバグですか？

Answer 1

svgはmargin-top：50vhで配置されています。代わりにこれを試してみてください：

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