在Web開發過程中，我們經常會用到文本框，然而如何讓這些文本框居中卻是一道難題。下面我們就來介紹一下如何用CSS樣式讓文本框居中。 首先，在HTML中我們需要先創建一個文本框。代碼如下：

<form><input type="text" name="myText" placeholder="輸入您的文本" /></form>

接著，在CSS中，我們可以用margin屬性來控制元素相對于其容器的位置。因此我們可以設置margin屬性來實現文本框的居中。代碼如下：

form {
text-align: center; /* 文本居中 */
}
input[type="text"] {
margin: 0 auto; /* 左右margin自動分配，將元素居中 */
width: 50%; /* 設置寬度，達到居中效果 */
padding: 12px 20px; /* 設置padding */
border: 1px solid #ccc; /* 設置邊框顏色 */
border-radius: 4px; /* 設置邊框圓角 */
box-sizing: border-box; /* 將padding和border包含在元素寬度內 */
}

在上述代碼中，我們定義了文本框的邊框、圓角、寬度、padding以及自動margin分配。原理是左右margin為auto時，瀏覽器會將剩余空間平分給左右margin，從而實現元素的居中。 代碼中的box-sizing屬性用來指定元素的哪些尺寸會被包括在元素的寬度和高度之內。默認值為content-box，表示元素的寬度和高度僅包含內容；而我們設置了border-box，則是將元素的padding和border包含在內。 同時，我們還可以通過text-align屬性來控制文本框內的文本居中，以更好地達到居中效果。 最后，我們可以在瀏覽器中查看效果，發現文本框已經完美居中了。 綜上所述，僅需要簡單的CSS樣式代碼，文本框就可以輕松實現居中效果，從而提升網站美觀度和用戶體驗。