頁面搜索居怎么做 CSS

在網(wǎng)頁設計中，使用CSS（級聯(lián)樣式表）來定位頁面元素是非常常見的，如果你想讓頁面上的搜索框居中顯示，可以通過CSS的flex布局來實現(xiàn)，下面是一個簡單的示例代碼：

HTML結構：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
  <button class="search-button">搜索</button>
</div>

CSS樣式：

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.search-button {
  height: 30px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
}

在這個示例中，.search-container類使用display: flex;將其子元素設置為flex布局，justify-content: center;和align-items: center;將子元素在水平和垂直方向上居中。.search-input和.search-button類分別設置了搜索框和搜索按鈕的樣式。

你可以將這段CSS代碼復制到你的網(wǎng)頁中，并根據(jù)需要調整樣式，記得將.search-container類應用到包含搜索框的容器上。