在前端開發中，我們經常需要為網站或應用程序添加輸入框。但是，這些輸入框不一定總是處于理想的居中位置。本文將介紹一些CSS技巧，以便輕松將輸入框居中。 在HTML中使用input標簽創建一個輸入框。在CSS中，我們使用居中命令來實現位置居中。在這種情況下，居中命令包括水平對齊，垂直對齊或兩者都包括。對于輸入框的水平居中，我們可以使用以下代碼：

p { text-align: center; }
input { display: block; margin: 0 auto; }

在上面的代碼中，我們首先使用CSS中的文本居中命令將輸入框的父元素p標簽居中。其次，我們使用CSS中的display和margin命令將輸入框設置為塊級元素，并將其在水平方向上居中。 如果您想將輸入框垂直居中，我們可以使用以下代碼：

.container { display: flex; align-items: center; justify-content: center; height: 100vh; }
input { margin: 0 auto; }

在上面的代碼中，我們使用CSS較新的flexbox布局，將其父容器.container設置為彈性盒子。flexbox允許我們在父容器中對子元素進行對齊。在這種情況下，我們將align-items和justify-content屬性都設置為center，以水平和垂直方式居中所有內容。最后，我們設置容器的高度為100vh，以使其填充整個屏幕。我們使用（margin: 0 auto;）屬性讓輸入框水平居中。 在本文中，我們介紹了使用CSS將輸入框居中的不同方法。這使得設計和布局更加容易，同時也能夠使用戶界面更加清晰和易于使用。無論您選擇使用哪種方法，都可以確保您的輸入框與整個設計風格相符，并且易于訪問和使用。