有的时候做垂直居中操作不好控制，今天简单探索一下这个vertical-align样式
Vertical-align：调整垂直方向的位置
使用此样式的前提，你得为该元素设置空间，比如：行高
如果给下面的div设置position:absolue;那呈现的效果就不是居中了，元素原封不动；
能让postion:absolue;移动的设置有top...和margin-等等
元素里面的文字内容是垂直居中的，因为文字是默认有行高的。
设置了vertical-align:middle；便实现了垂直居中，前提需要在父容器里面设置行高等于容器的高度，让子容器有空间条件达到相对于父容器垂直居中。Line-height:500px;
针对line-height、text-align这样的属性，它们作用在容器里面的内容，对自己里面的内容下命令，对自身不起作用，不像width,height这样的属性改变自身。
Vertical-align:它直接作用在自身，如同width,height作用在自身一样。
Verical-align:middle;
两个父级容器，其中一个容器设置此属性，并且两者的子容器都没有设置此属性
设置了vertical-align:middle；的容器中间线对准没有设置此属性的底部
两个父级容器，其中一个父级容器的子容器设置此属性：
基于这样的原因可以实现另一种垂直：
父容器有两个子容器
写一个子容器没有宽度的div,高度是父容器的高度，另一个子容器直接设置vertical-align:middle;就可以实现垂直居中。原理就是用到的：两个父级容器，其中一个容器设置此属性，并且两者的子容器都没有设置此属性。设置了vertical-align:middle；的容器中间线对准没有设置此属性的底部。
大家可以总结一下都有哪些样式属性作用于自身的，像：width、height...，哪些是作用于它里面的子元素的，像：line-height、text-align...