第六种方法，使用css的writing-mode属性，结合margin：auto。
参考文章：改变CSS世界纵横规则的writing-mode属性
传统的web流中，margin设置auto值的时候，只有水平方向才会居中，因为默认width是100%自适应的，auto才有计算值可依，而垂直方向，height没有任何设置的时候高度绝不会自动和父级高度一致，因此，auto没有计算空间，于是无法实现垂直居中。
原始Web流中，以下代码只能实现水平居中：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 400px; height: 400px; background-color: yellow; } .auto { display: block; margin: auto; } </style> </head> <body> <div class="box"> <img src="me.jpg" class="auto"> </div> </body> </html>
加入writing-mode属性之后，代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 400px; height: 400px; background-color: yellow; writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .auto { display: block; margin: auto; } </style> </head> <body> <div class="box"> <img src="me.jpg" class="auto"> </div> </body> </html>
实现的小猫的垂直居中，实际上如果换个角度看图片，比如该黄色背景的div向左旋转90度，或者把自己的脑袋向右歪一下，这样right就变成了传统web流中的top，就可以很好的理解了为什么用margin可以实现垂直居中。
但是该方法在IE8中的却不好使，但是在把img元素换成div就可以了