前言
居中是平时工作中的最常见的一种需求，各种图片居中或者各种弹窗，水平居中还好，特别是垂直居中，很多初学者表示太难写了，现在列举一些常用的方法。
实战
这里只讲述css相关的方法，js暂时不提，毕竟这是样式上的事情，就不劳烦js出手了。
1. top 50% ;margin-top:-自身高度/2
记得最早工作的时候学到的第一个方法就是，top给50%，然后把自身向上移动自身高度的一半，具体实现是
<style> .content{ position:relative; width:500px; height:400px; border:1px solid black; } .box{ positon:absolute; width:200px; height:200px; background:orange; top:50%; margin-top:-100px; } </style> <div class="content"> <div class="box"></div> </div>
这样就很容易实现了垂直居中，但这种必须要知道自身的高度，才能使用margin-top:-100px这种来达到目的。
优点: 写法简单，兼容性好
缺点: 必须知道目标元素的高度，而且高度必须是固定的值，否则样式要跟着相应的改动，不够灵活
2. top 50% ; transforms:translateY(-50%)
这个方法和上述原理一致，只不过向上位移换成了transforms:translateY写法
.box{ positon:absolute; width:200px; height:200px; background:orange; top:50%; transforms:translateY(-50%) }
由于用到了css3的新特性，所以对浏览器的要求就比较高了
优点: 写法简单，适应性好
缺点: 兼容性一般，不支持ie8浏览器
3. margin:auto
大家平时可能都用过margin:0 auto来实现一个div水平居中吧，其实也是可以做垂直居中的。
.box{ positon:absolute; width:200px; height:200px; /**必须要指明宽高**/ background:orange; top:0; bottom:0; margin:auto }
是不是很神奇？但是有个地方要注意的是，这个必须要指明宽高，不然的话top:0;bottom:0就把容器撑满了。
优点: 写法简单，适应性好，兼容性好
缺点: 需要指明元素宽高，如果目标元素宽高是变化的，你可以通过js来辅助生成
4. vertical-align:middle
这个方法是我最喜欢用的一个方法，基本满足上述的全部要求，主要用到了多个元素vertical-align:middle实现垂直居中，由于需要多个元素才能生效（不然一个元素跟谁对齐呢），所以再添加一个i标签
<style> .box{ display:inline-block;/**必须是inline-block类型**/ width:200px; height:200px; background:orange; vertical-align:middle; } .m{ display:inline-block;/**必须是inline-block类型**/ width:0; height:100%; vertical-align:middle; } </style> <div class="content"> <i class="m"></i> <div class="box"></div> </div>
这样就实现垂直居中，而且不需要关注目标元素的尺寸，适应性强
通常我在用的时候用用一个伪元素来代替，避免在html中新增结构
<style> /**单独用一个类名表示，可作为公共样式**/ .mfix{ font-size:0;/**消除空隙**/ } .mfix:before{ content:''; display:inline-block; width:0; height:100%; vertical-align:middle; } .mfix>*{ display:inline-block; vertical-align:middle; } .box{ width:200px; height:200px; background:orange; vertical-align:middle; } </style> <div class="content mfix"> <!--添加一个mfix类名--> <div class="box"></div> </div>
这样在需要垂直居中的父级上添加一个.mfix就可以实现垂直居中了。
优点: 适应性好，兼容性好
缺点: 可能稍微有点复杂吧。
5. writing-mode
这个方法是在张鑫旭的博客中发现的，也挺有意思。
正常情况下比如text-align:center，inline-block元素可以实现水平居中，假设我们通过writing-mode将水平流改成竖直流，不就形成垂直居中了吗？
在父级上加上如下样式
.content{ writing-mode: tb-rl; /**内容从上往下(top-bottom)，从右往左(right-left)垂直流动，下面是一些兼容性写法**/ -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; text-align: center; }
/
这样也可以做到垂直居中，不过要注意的是，现在里面的文本也会变成从上到下排列，所以需要重置一下。
还有一个问题就是，如果这个时候要想水平居中就gg了，原理和刚才反过来，可以通过套一层改变流向来解决，具体实现可以参考demo
优点: 适应性好，兼容性好
缺点: 算是一个偏方吧。而且writing-mode的语法太杂，各种各样的，所以。。玩玩就好
6. flex大法
这个方法接触过css3的应该都接触过吧，只要在父级加上如下代码就能实现垂直居中了
.content{ display:flex; justify-content: center; align-items: center; }
如果对浏览器没什么要求，尽量都用这种方式吧。
优点: 写法简单，适应性好
缺点: 兼容性一般，不支持ie8浏览器
小节
以上共有6种方式来实现垂直居中的效果，个人是最青睐第4种方式的，兼容性好，适应性好，各位小伙伴还有没有其他的实现方式呢？
