元素绝对定位在底部水平居中

在做移动端开发曾遇到的一个问题，要使元素在底部水平居中显示，于是找了解决方案：
页面代码：

<div class="sea_result_con">
     <span class="sea_result">共查询到2条记录</span>
 </div>

css代码：

.sea_result_con{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);    /* IE 9 */
    -moz-transform:translate(-50%, -50%);   /* Firefox */
    -webkit-transform:translate(-50%, -50%); /* Safari 和 Chrome */
    -o-transform:translate(-50%, -50%); /* Opera */
}

比如上方这张图，通过以上定位“共查询到2条记录”到底部了，但是电脑端看不出来，手机上点击上方输入框，弹出手机的软键盘，发现“共查询到2条记录”被顶到输入框上面，这就很影响用户体验了，于是为了解决这个问题我们可以在代码加一句：

.sea_result_con{
    z-index: -1;
}