CSS中按鍵中字體的位置是一個常見的問題，在編寫網站和應用程序時，正確的按鍵字體位置可以讓用戶更容易識別和使用頁面上的按鈕。下面的內容將介紹如何在CSS中設置按鍵字體的位置。

.button {
font-size: 14px;
line-height: 1.5;
padding: 10px 20px;
border-radius: 5px;
background-color: #ff0000;
color: #fff;
text-align: center;
display: inline-block;
margin: 20px;
position: relative;
}
.button:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border: 10px solid #fff;
border-radius: 50%;
opacity: 0.6;
}
.button:hover:before {
width: 100%;
height: 100%;
border-width: 0;
opacity: 0.3;
}

以上的代碼演示了如何使用CSS實現一個簡單的按鈕效果，并且將按鍵中字體的位置設置在按鈕的中心。重點是使用了:before偽元素來創建一個圓形的白色背景，并且使用了transform屬性將其水平和垂直居中。

這段CSS代碼中的:before偽元素也可以用來展示圖標或者其他的內容，只需要替換掉content屬性中的文本即可。

正確的按鍵字體位置對于用戶體驗和頁面設計來說至關重要。通過使用CSS中的:before偽元素，我們可以輕松地實現一個專業、可定制的按鍵效果。