div中实现居中

今天纠结了大半天的居中，把学到的先记录下来，还没完全弄清楚，发现网上原创的技术贴并不算多，大多都是相互转载。（ps.先安利一个大神的帖集，昨天才发现的，内容丰富，语言，呃...很幽默，一般都是图文并茂，看了你就懂了=。=（http://www.zhangxinxu.com/））

首先要实现的是文字居中，原本以为用text-align: center;vertical-align: middle;就可以实现，然而并不能。根据《css权威指南》因为vertical-align应用于行内元素和表单元格，无继承性，用百分数来表示值的时候是相对于元素的line-height值，应用到表单元格时，只能识别baseline、top、middle和bottom等值。所以vertical-align没法影响div这样的块级元素中的内容垂直方向的对齐。还是先贴我凌乱的代码~

方法1：也是最简单的方法，设置line-height和标签盒子的高度一致。

之原本以为line-height就是在p里设置行高用一下，原来还有这样的用处。补充一下关于line-height的继承性，其百分数相较于字体的大小，而且是父元素的字体大小。

结果就是在段落中会显示10px的行高和18px的字体，肯定不和谐啦，一般情况下行高要是字体的1.2倍。方法就是利用缩放因子，即将line-height：1.2，当制定一个数时缩放因子将是继承值而不是计算值，简单地说子元素会根据自己的字体大小来计算行高。（18px ×1.2）

方法二：设置padding，这个要算，不方便。

方法三：模拟表格。

其实是增加了一个div标签，外层div设置display：table；内层div设置display：table-cell，然后就可以利用vertical-align：middle。（有人说display：table-cell是布局神器，虽然ie6和ie7不支持，也才第一次接触，先埋个草）

至于图片居中对齐也可利用display：table-cell和文字大小来实现。或者将img放置在a标签中，给<a>设置display：inline-block同时结合font-size来实现。原理还不清，主要是不知道font-size到底应该设置为多大，才能使图片居中呢？利用table-cell时，整个外边框向左边移动了，似乎是影响了margin：5px；的设置。利用图里面代码的数值勉强可以实现居中，就自己试出来的。这问题先留着。（献上小新的小白~）