在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按鈕形態。