[CSS] 内联元素内的文字居中显示（按钮、链接等）

最近在做一个移动端的响应式页面，对自定义样式要求较高，很多地方需要细微的调整，比如按钮、链接等内联元素，不能只是让它看起来居中，而要做到“响应式”居中……水平居中很简单，但是垂直居中的问题困扰了我很久，直到我研究过bootstrap的_variables.scss文档后，才仔细地了解到一些组件的构造。

如果修改了inline/inline-block元素的默认样式后，里面的文字不居中了，试试这个方法，只需要5步~

CSS代码（示例）：

a {
    height: 1.5rem;    /* step1：确定高度 */
    font-size: .8rem;    /* step2：确定字号 */
    line-height: 1;    /* step3：行高设为字号的1倍 */
    padding-top: .35rem;    /* step4：pt = pb = (height-fontSize)/2 */
    padding-bottom: .35rem;
    text-align: center;    /* step5：水平居中 */
} 

---

以上。