在CSS中，设计一个漂亮的按钮可谓是前端开发中一个非常重要和基本的技能，在这里，我们将讲述如何设计一个按钮的文字居中偏上的效果。

.button {display: inline-block;padding: 12px 24px;font-size: 18px;background: #008CBA;color: #fff;border-radius: 5px;text-align: center;line-height: 1.2; /* 文字行高 */position: relative;}/* 文字容器 */.button span {position: relative;z-index: 2;}/* 用于添加阴影 */.button:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 5px;background: rgba(0, 0, 0, 0.2);z-index: -1;transition: transform 0.3s;transform: scale(0.9);}.button:hover:before {transform: scale(1);}

如上文所示，在CSS中，文字居中偏上的效果实际上是通过设置文字行高和对文字容器的相对定位达到的。代码中的.button是按钮的基本样式，.button span是用于包裹文字的容器。需要注意的是，我们给容器设置了relative定位，而按钮本身是.button:before中的伪元素，用于添加按钮的阴影效果。

通过将文字容器相对定位，我们可以在容器中设置一个z-index较大的元素，将文本容器的z-index设置为较小（默认）的数值，让文本容器留出一定的位置，从而使得文本相对于按钮居中偏上。

最后值得注意的是，我们给.button设置了line-height属性，通过设置一个适当的行高，可以使得文本在进行相对定位后能够实现居中偏上的效果，因此，在进行按钮设计时，设计者需要在考虑到按钮的布局和文本显示的情况下，合理设置行高、适当地进行相对定位，才能实现最完美的CSS按钮形态。