CSS垂直居中解决方案

博主回来了。。本来在github上布了blog，后面换公司，博客md文件都忘记拿走了- -
一个原先同学问我 CSS怎么垂直居中呀= =，一看就没好好学习过。。

切入正题 css垂直居中的4种解决方案

盆友们可能有的只是需要代码

//自己去拿吧~ 这是针对image的 我也懒得改了~
https://github.com/evanzlj/turbo-spork

我所知道的4种方式(其他的不是不行，而是我不常用)

1. 容器(父元素)line-height = height，子元素的display为inline或者inline-block
   利用了行内元素的特征，在块级元素中默认行高居中，兼容性的话 就看inline-block的了~~~

2. 容器(父元素)display:table-cell + vertical-align:middle , 老一套，利用table-cell的特性vertical-align居中，兼容性不错，布局不推荐，小范围的图片这种 还可以用用

3. 容器(父元素)position:relative，子元素的position为absolute;top:50%;transform:translateY(-50%);
   解释一下，top是相对父元素的height，而transform(变形)是相对于子元素本身的，这种方式常用于移动端，理由就是 变形 是css3的新特性，PC端可能就呵呵了~（我们还没有击垮IE8…）

4. 容器(父元素)display:flex; align-items:center; ，新技术，flexbox 布局
   这个的兼容性是个问题，微信浏览器这会儿好像还没有支持flex的意思。。慎重使用吧，’现代’浏览器大都能用了。想深入学习的话 推荐 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 到这里看看

后记

网上的解决方案，一个赛着一个不靠谱，= =，自己总结一遍 勿喷~