在網站開發中，我們經常需要使用CSS來設置元素的邊框樣式，來達到美化頁面的效果。然而，有時候會發現設置邊框后元素并沒有居中顯示，這個問題就需要我們去進一步分析、尋找解決方法。 首先，我們來看一下一個普通的div元素代碼：

<div>
<p>這是一段文本</p>
</div>

我們想要對這個div添加邊框樣式，并讓其居中顯示：

div {
border: 1px solid #ccc;
text-align: center;
margin: 0 auto;
width: 200px;
height: 200px;
}

然而，我們會發現這個div元素并沒有居中顯示。那么，這個問題的原因是什么呢？ 首先，我們需要了解一下CSS的box-sizing屬性，它用來設置元素的盒子模型。默認情況下，元素的盒子模型是content-box，即元素寬度只包括內容的寬度，不包括邊框和內邊距的寬度。因此，當我們設置了邊框后，元素的實際寬度會變大，從而導致其不能居中顯示。 為了解決這個問題，我們可以將元素的盒子模型設置為border-box，這樣元素的寬度就包括邊框和內邊距的寬度了。代碼如下：

div {
border: 1px solid #ccc;
text-align: center;
margin: 0 auto;
width: 200px;
height: 200px;
box-sizing: border-box;
}

通過上述代碼，可以發現此時的div元素已經可以居中顯示了。通過使用CSS的box-sizing屬性，我們可以解決邊框導致元素不能居中顯示的問題，讓元素的顯示更加美觀。