垂直居中/定位
DIV的垂直居中，能够通过设置外边距的方式来实现。在父级DIV内部的子集DIV可以通过命令：
margin: (calculated value)px auto;当然也可以通过绝对定位来实现,而代码稍有区别,需要设置父级与子级DIV的定位：
.父级DIV {
position: relative;
} .子集DIV {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
那么我们怎么理解第二种DIV的垂直居中方式呢？
首先从两个定位开始说：
position: relative和position: absolute，即相对定位和绝对定位。
相对定位是没有脱离正常的文档流的，此时，对象原来占有的位置被保留。（移动后会覆盖其他内容）。
绝对定位脱离了正常的文档流，它相当于飞了起来，不在占位置了。
在定义子集绝对定位后，通过 top: 0; left: 0; bottom: 0; right: 0; 使子DIV占满父DIV，之后设置子DIV的高度和宽度为一半。之后定义外边距为auto。由于脱离了正常的文档流，这里我们会给上下和左右编剧相同的值，最终实现居中的效果。
文字的垂直居中我们有两种方法。
一种是将行高line-height设置的与DIV的高度一样；
另外一种是将父级的DIV用display来定义框的类型（display如果使用不谨慎，容易违反HTML中已定义的层次结构）：
我们可以将父级的DIV定义为table表格，将子DIV定义为表格单个元素，之后用vertical-align: middle;来实现文字的垂直居中。
但是值得一提的是，我在用这种方法实现垂直居中时发现，如果设置了子级DIV为单元格的话，那么子集的DIV会把父级直接填满（先设置了两个DIV的背景颜色）。所以情况不允许，还是第一种方法比较好。
遗留的问题
下一篇会写到一些遗留的问题，有关自适应，父级塌陷以及DIV嵌套的小BUG。