本文目錄導讀：

1. 行內元素中的文本框居中
2. 塊級元素中的文本框居中
3. 使用flexbox實現文本框居中

HTML文本框居中CSS代碼怎么寫

在HTML中，我們經常使用CSS來美化我們的網頁，其中就包括了讓文本框居中的技巧，文本框居中，無論是在行內還是塊級元素中，都可以通過CSS來實現，下面我們就來看看如何實現HTML文本框的居中顯示。

行內元素中的文本框居中

對于行內元素，比如span、a等，我們可以使用CSS的text-align屬性來實現文本框的居中顯示。

<span style="text-align:center;">這是居中的文本框</span>

塊級元素中的文本框居中

對于塊級元素，比如div、p等，我們可以使用CSS的margin屬性來實現文本框的居中顯示。

<div style="margin:0 auto;">這是居中的文本框</div>

上述代碼中，通過給div元素設置左右margin為0，以及設置auto來使div元素在水平方向上居中顯示，這種方法在塊級元素中非常常見，可以實現元素的水平或垂直居中顯示。

使用flexbox實現文本框居中

除了上述方法外，我們還可以使用CSS的flexbox布局來實現文本框的居中顯示。

<div style="display:flex;justify-content:center;align-items:center;">這是居中的文本框</div>

上述代碼中，通過給div元素設置display為flex，以及設置justify-content和align-items為center來實現文本框在水平和垂直方向上的居中顯示，這種方法可以實現元素的復雜布局需求，比如多個元素的水平或垂直居中顯示。

實現HTML文本框的居中顯示有多種方法，我們可以根據具體的需求和場景來選擇合適的方法，通過掌握這些技巧，我們可以更好地美化我們的網頁，提升用戶體驗。