垂直居中是常见的CSS需求，通常的做法有以下几种：
- flex布局，最方便也是最推荐的方式；
- line-height属性控制行高实现单行内容垂直居中；
- 对居中元素使用display: table-cell （或inline-block），然后再vertical-align: middle 控制垂直对齐方式；
- position: absolute，top: 50% ，然后给个元素高度一半的负margin，通常用于高度固定元素的居中；
- margin: 50vh然后transform:translateY(-50%)，translateY和负margin的思路很相似，但高度就不用固定了。用vh会按照屏幕高度来居中，当然也可以改成和绝对定位一样的效果；
- CSS3的新方式，display:-webkit-box然后把-webkit-box-pack和-webkit-box-align都设置成center；
以上常见方案，根据实际情况灵活应用即可，这里不做详细讨论。但总有些开发人员脑洞大开，想出一些另辟蹊径的垂直居中方案，下面来盘点一下这些鬼畜的解决方案。
优雅矜持方案一：
top: calc(100% - 50px);
这本应该是最简洁优雅的解决方案，鬼畜的地方在于，有些浏览器（比如微信）就是不支持calc，于是被迫通过JS去实现类似calc的效果。
不明觉厉方案二：
其实这个方案兼容性非常好，但是新手往往不理解其中原理，因此常在前端面试中被提及。
水平居中最常用的“margin: auto”，right和left默认都是0，所以浏览器根据“margin:
auto”就给元素添加左右相等的外边距，实现水平方向的居中。在垂直方向也是一样道理，在父元素和子元素都设置了高度和宽度的情况下，把top和bottom都设置成0，“margin:
auto”也能在上下分别添加一样高度的外边距，实现垂直居中的效果。
不为人知方案三：
writing-mode:vertical-lr
这个是真的“冷门”了，几乎没有见到有人用到生产环境里，甚至许多前端开发连writing-mode属性都没听说过。但兼容性还挺好，IE8以上都支持（IE7以下还可以用-ms-writing-mode:tb-lr），各大浏览器也都能写兼容。
writing-mode原本只是用于文字排版。vertical-lr是垂直排版从左往右，vertical-rl是垂直排版从右往左。改变了文字的排版方向，原本用于横向居中的代码，竟然也能在垂直方向上生效了。块级元素使用margin:auto，图文和文字使用text-align:center。
本文未经许可禁止转载，如需转载关注微信公众号【工程师加一】并留言。