最近和我们公司负责切图工作的同事那边要了一些psd来学习切图。好久没有做过关于CSS方面的工作，写起来憋手蹩脚的。
最近打算研究一些CSS相关的东西来练练手，免得到要用的时候才发现自己已经忘得差不多了。
在制作Web页面时大家或多或少都有碰到CSS制作水平垂直居中的问题，特别的其中的垂直居中，更是让人烦恼。
用CSS来实现元素的垂直居中效果是件苦差事，这里我总结了一下几种不同实现的方法和他们的优缺点和适用场景。
垂直居中
方法一：
这种方法适合只有单行内容的情况。只要保证元素内容是单行。并且高度是不变的。将height和line-height的值设置成一样就可以了。
适用场景
- 能在所有浏览器下工作，没有足够空间时，内容不会被切掉（没有足够空间就不属于单行了）。
- 对运用在小元素上是非常有用，比如说让图片或者单行文本字段垂直居中。
优点
- 实现简单。
- 结构简单。
缺点
只能在单行时适用，多行时效果很差。
方法二：
这种方法要实现垂直居中首先要满足有一个固定的高度，并且父容器需要设置相对定位（position: relative）。
给需要垂直居中的容器设置绝对定位（position:absolute,并且定位高度（top:50%）和margin-top为负的高度的一半（margin-top:-height/2）。
适用场景
- 能在所有浏览器下工作。
优点
- 不需增加额外的标签。
- 结构简单。
缺点
- 只能支持固定高度的情况。
- 需要父标签配合设置相对定位。
- 固定高度导致内容溢出时会出现滚动条或隐藏，不会配合内容高度变化。
方法三：
这种方法是通过让div去模拟表格的效果，从而通过使用table-cell的vertical-align属性来实现垂直居中。
适用场景
- 不兼容ie6，ie7
优点
- 可以自适应高度，不会出现滚动条。
- 高度不足不会被切断。
缺点
- 兼容问题，不兼容ie6，ie7。display: table 在ie6，ie7下无效（不能强行装table了，好忧伤）
怎么做兼容？
要兼容蛋疼的ie6，ie7，需要在原本的table-cell里面再套一层div，并且针对ie6，ie7使用hack。
ie6下的效果图：
方法四：
这种方法是通过在居中元素前放置一个空的块元素，设置块元素的高度为50%，margin-bottom为居中元素负的高度的一半，居中元素清除浮动来实现的。
适用场景
- 能在所有浏览器下工作。
优点
- 在没有足够空间的情况下不会被自动切割。
- 比上一个模拟table实现起来更简单。
缺点
- 元素高度固定。
- 元素溢出时只能在父元素上设置overflow属性，出现滚动条或切割。
- 增加了一个多余的块元素，为了保证ie6，ie7下的兼容性，div必须是有内容的块元素，这里用了 填充。
ie6下的效果图：
方法五
当我们只需要一个简单的多行文本垂直居中而且父容器的高度没有要求时，可以很简单的用设置上下相同的padding值来做到。
适用场景
- 能再所有浏览器下工作。
优点
- 结构简单。
缺点
- 父容器不能有固定高度。
上面讲了5种不同的垂直水平居中的方法，其实还有非常多的实现方法，这里就不一一总结了，我们还是在这展望一下未来我们所希望的垂直居中的方法吧。
现在所使用的垂直水平居中的方法，绝大部分都是通过各种奇妙的写法来达到效果的，我们想要的是更简单的写法。比如：
position：center;
希望css未来的发展能够满足大家这个迫切的需求，不用再在各种各样的垂直居中方案中纠结了。(╯‵□′)╯︵┻━┻
有兴趣继续了解的可以去w3cplus看看，上面有更多更加完善、碉堡的总结。