CSS搜索框上下居中對齊是一個常見的UI設計問題。在許多情況下，我們都需要將文本框和搜索按鈕對齊，這樣可以讓頁面更加美觀和易于使用。那么如何讓它們垂直對齊呢？下面是一些使用CSS實現垂直對齊的方法。

/* 方法一：使用display:flex; */
.search-wrap{
display:flex;
align-items:center;
}
.search-input{
padding:10px;
margin-right:10px;
}
.search-btn{
padding:10px;
background-color:#5B5B5B;
color:#fff;
}
/* 方法二：使用table-cell; */
.search-wrap{
display:table-cell;
vertical-align:middle;
}
.search-input{
padding:10px;
margin-right:10px;
}
.search-btn{
padding:10px;
background-color:#5B5B5B;
color:#fff;
}
/* 方法三：使用line-height; */
.search-wrap{
height:50px;
line-height:50px;
}
.search-input{
display:inline-block;
vertical-align:middle;
padding:10px;
margin-right:10px;
}
.search-btn{
display:inline-block;
vertical-align:middle;
padding:10px;
background-color:#5B5B5B;
color:#fff;
}

以上三種方法都可以實現搜索框的上下垂直對齊。具體使用哪種方法，可以根據實際情況進行選擇。值得一提的是，方法一使用flex布局，支持性較好；方法二使用table-cell，兼容性稍差；方法三使用line-height，瀏覽器兼容性較好，但需要設置固定高度。