图片居中和安卓输入框兼容问题

这是本人第一次写博客，我是博客新手，写的有不好的地方还请见谅。

我的是搞前端的，接触最多的还是移动网站。
首先，宽高自适应问题。
最外层的元素：宽度写成width:100%;高度写成heigth:auto;overflow:hidden;
元素内有图片并且宽高不是百分比，而是固定宽高，布局在屏幕中心（左右居中）。
这个时候就需要将img元素宽高固定，并转为块元素，加上margin:0 auto;就可以将图片左右居中在屏幕中了。
html

    <div class="box">
        <img src="img/udacity.png" />
    </div>

<style type="text/css">
    .box{width:100%;height:auto;overflow:hidden;}
    .box img{width:110px;height:115px;display:block;margin:0 auto;}
</style>

关于安卓手机弹出输入框的问题，这个时候块元素高度是：height:auto;页面高度就会被压缩。
解决办法一：对于每一个输入框固定高度，并在最底部写一个块元素。意思就是将高度撑开。
解决办法二：最外部的元素固定高度。

如果大家还有什么解决办法可以说出来。谢谢