宽高不定的元素，以中心为原点百分比定位～

随着越来越多的屏幕分辨率多样的设备出现，原来绝对定位布局的界面往往会造成很差的用户体验，让我感触很深的是类似于android 3.0 上跑的2.x应用只有中间那么一小块。最近这方面思考的比较多，流动布局和自适应布局是很多人期盼的，但实际应用上还比较少，css3.0出来了，它的弹性盒模型被关注的竟然不是非常大，相反圆角之类的反而非常热。下面是我对自适应布局稍微做了的些思考：

• 元素本身的宽高应该是auto自计算的；
• 元素应该可以自己定义定位原点，比如几何中心；
• 元素定位应该是比例式的，比如应用黄金比例；

为此我这样预想设定css：

• width:auto; height:auto;
• 偏移基于元素自身：margin:-50% 50% 50% -50%;
• top:36.8%;let:50%;

实际上元素自身宽高的自计算在上篇文章《宽度不定的元素居中～》中稍微探讨了下这个问题：

• position:relative,static:基于父容器宽100%计算，即宽度尽可能大，但高度则尽可能小；
• position:absolute||float:left|right:||display:inline-block基于子元素宽度计算，即宽度尽可能小，高度依然是尽可能小；

依照经典的定宽高居中方法：top:50%;left:50%;margin:-一半高 0 0 一般宽;类比而得不定宽高的元素偏移应该是margin:-50% 0 0 -50%;不过可惜的是，在《相对定位里的百分比小议》里也谈及过，marigin和padding的百分比是基于父宽的，这的确很奇怪，不过是事实，于是我们能用的只能是top|bottom了，于是就得增加一个容器，没错，传统盒模型似乎只能这样，于是得到如下代码：

我以几何中心为原点百分比定位了～

这在ie 6完全ok，可是在chrome opera和firefox中，竖直方向表示压力很大，不过这在ie 6解决了，是个好兆头，在现代浏览器既然支持新盒模型，何不用之，这里通过经典的css3 box盒模型先水平竖直居中方法得到居中，再百分比偏移得到，代码如下：

我以几何中心为原点百分比定位了～

结合两者:nth-child(1n)来判断css3，通过ie的if选择来判断ie得到如下代码：

我以几何中心为原点百分比定位了～

测试通过:ie6 chromium firefox 4.0 opera不支持新盒模型，显示有问题～