在Web開發中，我們通常需要將文本框水平和垂直居中以實現更好的外觀和布局效果。CSS提供了一些簡單的技巧來實現這種效果。 首先，我們需要將容器元素設置為相對定位，以便我們可以基于該元素定位文本框。然后，我們可以使用以下CSS代碼將文本框水平和垂直居中： ```css .container { position: relative; } .input-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 在這段代碼中，我們將文本框的容器元素（.container）設置為相對定位。接下來，我們將文本框（.input-box）設置為絕對定位，并使用top和left屬性將它們移動到容器元素的中心。最后，我們使用translate屬性將其向上和向左移動50％，以達到垂直和水平居中的效果。 我們還可以通過以下CSS代碼來垂直居中文本框： ```css .container { display: flex; align-items: center; justify-content: center; } .input-box { margin: auto; } ``` 上面的代碼使用Flexbox布局將容器元素和其子元素（即文本框）都居中。我們使用align-items和justify-content屬性將它們垂直和水平居中。而且，我們還將文本框的外邊距設置為auto，以便它在容器元素中水平居中。 總之，以上兩種方法都可以很容易地在CSS中實現文本框的水平和垂直居中。您可以根據您的布局需要選擇適當的方法。