搜索框是網頁設計中非常重要的一個組件，通過樣式來控制搜索框的位置和大小可以有效地提高網站的用戶體驗和美觀度。本文將介紹CSS中如何定位搜索框。

/* 使用position屬性定位搜索框 */
.search-box {
position: absolute; /* 相對于父元素定位 */
top: 50%; /* 向下偏移50% */
left: 50%; /* 向右偏移50% */
transform: translate(-50%, -50%); /* 調整位置 */
width: 200px; /* 搜索框寬度 */
height: 28px; /* 搜索框高度 */
border: 1px solid #ccc; /* 邊框顏色 */
border-radius: 14px; /* 圓角 */
padding: 0 10px; /* 內邊距 */
}
/* 使用flex布局定位搜索框 */
.container {
display: flex; /* 啟用flex布局 */
justify-content: center; /* 水平居中對齊 */
align-items: center; /* 垂直居中對齊 */
height: 100%; /* 容器高度 */
}
.search-box {
width: 200px; /* 搜索框寬度 */
height: 28px; /* 搜索框高度 */
border: 1px solid #ccc; /* 邊框顏色 */
border-radius: 14px; /* 圓角 */
padding: 0 10px; /* 內邊距 */
}

以上代碼提供了兩種不同的定位方式。使用position屬性可以相對于父元素進行定位，并通過top、left和transform屬性調整位置；而使用flex布局則無需考慮父元素定位，通過容器的justify-content和align-items屬性居中對齊搜索框。

無論哪種方式，都可以通過調整寬度、高度、邊框和內邊距等樣式，來實現不同形態的搜索框。