在網頁設計中，我們常常需要讓輸入框居中顯示，這里我們就來介紹一下如何使用 CSS讓輸入框居中。

首先，我們可以使用 flex布局來實現這個效果。我們可以把input標簽放在一個包含塊中，然后設置包含塊的 display 為 flex。在包含塊中，設置 justify-content 和align-items 為center即可居中顯示。

.container {
display: flex;
justify-content: center;
align-items: center;
}
input {
/*其他樣式*/
}

另外，我們也可以使用 margin 屬性來控制 input 的位置。我們可以給 input 增加一個margin值來使其水平居中。通過設置 margin-left 和 margin-right 的值為 auto 來實現左右居中。

input {
margin: 0 auto;
/*其他樣式*/
}

最后，如果您希望使用絕對定位來實現居中，也是可以的。我們可以使用 absolute 定位來實現居中。請看下面的代碼：

.input-wrapper {
position: relative;
}
input {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*其他樣式*/
}

這三種方法都可以實現 input 水平居中，您可以根據具體情況選擇合適的方式。