footer定位底部
起初我的打算是用绝对定位，脱离文本流，参照浏览器左上角定位，设置TRBL作为原点
此时我的代码如下
foo_container{
position: absolute;
bottom: 100px;
text-align: center;
}
这个时候的footer的定位情况
可以发现，文本确实是固定于底部了，于是我此时认为，footer的div应该是已经在底部了，只不过是文本没有居中罢了，然而我调整了文本的text-align或者margin等属性，发现依然没有任何动静，后来经过了测试发现，原来是父级的foo_container出现了问题，解决此问题只需要在其中加入width:100%即可，原来，我之前总体的auto不起作用的原因竟是因为没有规定好width
考虑到不同尺寸显示器的兼容问题，可以调用js动态的设置width值
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
document.getElementById("foo_container").style.width=w + "px";
</script>
然而此时仍然出现问题：缩小水平方向的窗口，那么以上设置等于０，窗口改变之后，不会随窗口变化而变化，也就是不再是当前显示的有效窗口居中，也就是出现了滚动条
垂直方向上移的问题可以通过设置top值来解决。但是设置top后bottom就无用了（逻辑上这个肯定冲突，设置了top已经定位了，又设置了bottom，那么浏览器听谁的？同理left和right也存在悖论），具体的可以试一下，那怎么办呢？
问题的根源在于使用绝对定位和设置bottom时，footer是跟随浏览器窗口变化而变化的，那我们要做的就是打破这种格局。
解决思路1、当界面上下伸缩时，动态调整css样式即可：具体为当达到某一位置时，使用buttom定位，当超过这个位置时，使用top定位，这样就可以保证，缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。具体实现如下代码：
<script>
function myFunc() {
//获取窗口高度
if (window.innerHeight)
winHeight=window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight=document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
}
if (parseInt(winHeight)<750){
document.getElementById("footer").setAttribute("class", "dAdjustTop");
/document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");/
} else {
document.getElementById("footer").setAttribute("class", "dAdjustButtom");
/document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");/
}
}
</script>
.dAdjustButtom{
position: absolute;
bottom: 100px;
}
.dAdjustTop{
position: absolute;
top: 530px; /* 750-120-100 JS中tag-footer的height-mid的padding-bottom*/
}
总结：1、水平居中可以使用width: 100%和text-align: center;来搞定；
2、垂直居中并实现动态变化可以使用onresize事件+js动态设置布局（position: absolute; 以及top/bottom）来实现；
3、 图片在div中居中设置：使用margin: 0px auto;
4、怎么保证左右拉伸时图片和输入框的绝对居中效果不变，设置最小宽度min-width的值一致即可！其他使用了display: inline-block的元素同理；
