在網頁設計中，表格是不可或缺的元素之一。而對于大型數據表格，搜索框又是一種非常實用的功能。那么在使用 CSS 實現搜索框居中時，該如何實現呢？接下來，就讓我來為大家介紹一下具體的實現方法。

首先，我們需要在 HTML 中添加一個表格和搜索框的代碼。可以使用以下代碼：

<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>20</td>
<td>女</td>
</tr>
</table>
<input type="text" name="search" placeholder="輸入關鍵字進行搜索">

接下來，我們用 CSS 來實現搜索框居中。我們可以把表格和搜索框包含在一個 div 容器中，并將該容器的 display 屬性設置為 flex，使用 justify-content 和 align-items 屬性來實現水平和垂直居中。代碼如下所示：

<div class="container">
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>20</td>
<td>女</td>
</tr>
</table>
<input type="text" name="search" placeholder="輸入關鍵字進行搜索">
</div>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
</style>

這樣，我們就成功實現了搜索框的居中效果。當然，如果你需要對表格和搜索框的間距進行微調，可以使用 margin 屬性來實現。看到這里，相信大家對搜索框的居中實現方法已經有了一定的了解了吧。