刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~ 后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。 ### inline 或者 inline-* 的元素竖直居中 可以借助 `padding`, `line-height`, `vertical-align` 等属性。有如下两种具体情景： 1. 单行竖直居中，如单行文本或者链接 这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。 See the Pen RapmvY by Yawen DENG (@Simona_Deng) on CodePen. 如果~~老娘就不想使用 padding