CSS：使用伪元素做水平垂直居中的微深入研究

二话不上先上代码

　　这是一个交流群中同事贴出的代码我自己敲了出来，他问到了css执行中伪元素和一般dom元素是什么关系？本着学习的态度，我想了想发现这块还真没学习过，所以自己查阅了一些资料，做了些小demo来与大家探讨一二。
　　其实我拿到这个代码第一反应也是想到了vertical-align:middle 不就是垂直居中的意思么，那只要搞清楚伪元素到底怎么执行就可以了。回来查了下资料发现自己还只是在皮毛上搬刀弄斧。我首先百度伪元素与dom元素的关系，没发现什么有用的东西 ╮(╯_╰)╭；然后我百度选择伪元素清除浮动的好处是什么？ 这一下发现了好东西，如下图：

　　说的很明白伪元素是在所使用它的元素内部的最后加入，如开始的代码中就是在div.box中的div.inner之后加上了:after。这里伪元素与其他dom的关系一目了然，即与使用伪元素的元素是父子关系，与父元素中的其他元素是同级关系，依次由上至下执行渲染等动作。
　　到了这里我又发现.inner中有vertical-align:middle这句我开始迷惑了，为什么有了这句还用伪元素呢？(有兴趣的同学可以自己敲敲代码，这里只贴部分代码和结果)当我把.inner去掉时，发现div.inner并为未垂直居中，只是　水平方向居中　(这里有坑，后面说，大家注意到就行)，然后在w3c上对于vertical-align的解释如下：

　　注意我用红色标注画出的地方，垂直居中是需要一个行内元素的基线来作为标准的。看到这里我明白了:after出现的意义，意义就是在于利用display:inline-block和height:100%这俩属性完成行内与基线这俩个大前提要求(即行内块元素，高度100%自然就以高度50%处即平常所说的中线为基线) 结果如下：

　　这里按理说效果出来已经完事了，但是我突然又想到 text-align不是只对文字居中么，那为什么也可以使div水平居中？(注意过上面所提到的斜体字，即'坑'的部分)，所以继续研究，w3c对于text-align给出的解释如下：(同样注意我用红笔画的曲里拐弯的标注。。。)

　　注意是块级元素内的文本水平对齐，然后对代码稍加修改如下图：

　　结果如下图：

　　可以很明显的看出text-align对于div.box中的块级元素h2没起作用，而对于div.box中的文字和行级元素中的文字来说他俩居中的基线是div.box的高度减去div.box中h2的高度的一半。而写在div.box外的h2毫无悬念的在body正中间。那么为什么对于伪元素垂直居中这种方法来说其中的.box这个div要加上text-align呢(text-align这个针对于文字的属性给div有用吗？)？事实上是有的，下面贴出我找到的资料截图：

　　可以看到text-align作用于行级元素即inline元素，当div添加display：inline-block后变成行级块，自然会使其水平居中。那么回到最初的代码上既然div.inner在div.box的帮助下已经水平居中，那么只要找到一个高度为50%的基线即可垂直居中，这时:after的出现就显得极其耀眼(块级元素的伪元素也为块级，行内元素的伪元素为行级。)，display:inline-block达到了vertical-align的相对所在行的要求，而height:100%达到了所在行的基线(即div.box高度的一半)的要求，所以垂直居中(把此元素放置在父元素的内容/字体的中部)，原来:after只是为了给div垂直居中一个基线标准！！！ 望与同道中人交流，一同进步。

参考文章：text-align 用法浅谈