问题出现场景

首先给大家说一下，我遇到margin：0 auto；失效问题的场景，我给公司做了一个注册用户的页面，是要内嵌在app里面的，在主流的手机里面是没有问题的，但是在安卓4.0（android4.0）的手机app里面发现一个问题，其中有一个input的标签，我给了宽高属性，因为要水平居中，我给了margin：0 auto；属性，但是我发现，给完这个属性之后，这个input的元素的宽高的属性都失效了！对没有错。就是失效了。input变成了宽度100%，高度自适应了。把margin的属性去掉就恢复了。

最后的解决方案

我给了目标元素也就是这个input的父级position： relative；属性。给这input元素的本身绝对定位。下面是代码：

<input class="oSubmit oXCenter" type="submit" value="立即注册">
.oSubmit {
            display: block;
            width: 9.8rem;
            height: 2.52rem;
            overflow: hidden;
            line-height: 2.52rem;
            background-color: white;
            margin: 0 auto;
            font-size: .72rem;
            margin: 0 auto;
            margin-top: .86rem;
            background: url('img/btnBg.png') no-repeat center center;
            background-size: cover;
            color: rgb(255, 255, 255);
        }
.oXCenter {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    /* IE 9 */
    -moz-transform: translateX(-50%);
    /* Firefox */
    -webkit-transform: translateX(-50%);
    /* Safari 和 Chrome */
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

就是这样算是解决了。我不知道我这个方法是不是算是笨方法，还有哪位大牛给个好的方法。
同时我还有一个问题没有解决：就是input的placeholder的兼容问题，在一些安卓（android）中会有一些偏上，给人的感觉不是多么好，不知道有么有解决的方案，百度上面的我也试了好多种，求大神指导一下。求评论。我要是找到什么好的解决方案，会在以后更新的。
下面是这次input的placeholder的设置的属性，以及图片：

TIM图片20171113150234.png
在上面的图片中可以很明显的看到上下的不居中。
右下边是一个div的标签。

<div class="contentBox ">
    <div class="inputBox">
        <input type="text" placeholder="请输入您的手机号">
    </div>
    <div class="inputBox">
        <input class="msgIpt" type="text" placeholder="短信验证码">
        <div class="msgBtn">获取验证码</div>
    </div>
</div>
 
// css
        .contentBox {
            text-align: center;
            margin-top: -1rem
        }

        .inputBox {
            margin-top: .4rem;
            position: relative;
            vertical-align: middle;
            text-align: center;
        }

        .inputBox:first-child {
            margin-top: 0
        }

        .inputBox input {
            display: inline-block;
            width: 13.08rem;
            font-size: .56rem;
            line-height: .84rem;
            color: rgba(255, 255, 255, 0.78);
            border: 1px solid rgb(246, 246, 246);
            border-radius: .2rem;
            background-color: transparent;
            /* padding: .36rem .46rem */
            padding: .36rem .46rem .34rem .46rem;
        }
        .inputBox .msgIpt {
            width: 7.9rem;
            vertical-align: top
        }   
        .inputBox .msgBtn {
            display: inline-block;
            vertical-align: top;// 不是这个的问题，我试过了。
            width: 4.78rem;
            height: 1.62rem;
            line-height: 1.62rem;
            margin-left: .24rem;
            text-align: center;
            background-color: rgb(246, 246, 246);
            font-size: .52rem;
            border-radius: .2rem;
            color: rgb(247, 160, 31)
        }

求大神指教。做代码的多多少少都会有强迫症的~