搜索框在移动设备上的作用不同

Question

我有一个搜索框。在桌面设备上，它会显示一切应显示的内容（垂直居中），而在移动设备上（本例中为android）显示的内容并未居中。

Android ， Desktop

这是我的代码：

（容器div）

.sb-c {
  height: 100%;
  display: flex;
  align-items: center!important;
  margin: 0 4px 0 0;
  float: left;
}

.sb-c form {
  position: relative;
  margin: auto;
}

.sb-input {
  display: inline-block;
  background: #e4dfce;
  outline: 0px;
  margin: 0px;
  border-color: #e4dfce;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  padding: .2em .3em;
}

（搜索按钮）

.sb-btn {
  padding: 0px;
  width: 28px;
  height: 28px;
  background: #baa99d;
  color: black;
  font-size: 14px;
  outline: 0px;
  border: 0px;
  border-radius: 0;
  -webkit-appearance: none;
  cursor: pointer;
}