怎么解决页面在微信浏览器的兼容性问题

Question

最近在做一个微信公众号微网站，用谷歌浏览器的手机模拟器调节页面，尽管在模拟器上已经没有什么问题了，但是拿到手机上运行还是有诸多问题，而且不会调试。
问题1：垂直居中失效。

css.home-page{
    position:relative;
    margin: 0;padding: 0;
    width: 100%;
    background-image:url(../img/background.png);
}

.home-page>img{
    position: absolute;
    top:50%;margin-top: -50%;
    left: 5%;width: 90%;
}

在手机上的谷歌浏览器也没有问题，目前只是在微信浏览器发现不能垂直居中
————————————————————————————————————————————————
问题2：在手机上进行表单输入时，输入法遮盖表单的提交按钮，输入完成后输入法键盘收回但是提交按钮消失了。
这个问题在微信浏览器上没有发生，但是在手机的谷歌浏览器上发生了，不影响项目，但是想知道为什么

Answer 1

top属性失效，什么原因

Answer 2

csstop: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);

Answer 3

我做网站高度一般能写死就写死的，然后通过计算定居中