## input value与placeholder垂直居中
### 情况分析
在移动端input value与placeholder同时垂直居中情况分析<br />
案例机型,IOS为iphone6 v10.1.1,Android为Galaxy Note3 Lite 4G v4.3
1. input不设置height与line-height<br />
   移动端IOS value与placeholder稍稍偏下<br />
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-1_3e1138578ffd598.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-2_94cf9141ed05ccc.jpeg)<br />
   移动端Android placeholder偏下,value稍稍偏上<br />
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-1_e8cf056de54dc45.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-2_5dfd007f6e7ea88.jpeg)<br />
2. input设置height与line-height同样的高度<br />
   移动端IOS value与placeholder都同时垂直居中了,但是当height过高,line-height也会很高,超过了input光标默认高度后,line-height的高度会成为光标高度,并且placeholder严重偏上<br />
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-3_65107ed696ac283.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-4_8a02772de549f6b.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-5_fb0a70ea1ef2ec1.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-6_2bf60a936367f2c.jpeg)<br />
   移动端Android placeholder垂直居中,value偏上,但是当height过高,line-height也会很高,,placeholder会严重偏上<br />
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-3_5ae5266dd84e415.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-4_7b74e31ad654e63.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-5_6470a3c8b54bb98.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-6_773af2a89ee2669.jpeg)<br />
3. input设置height高度与line-height为normal<br />
   移动端IOS value垂直居中,placeholder稍稍偏下<br />
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-7_0b52f9a58dbfa5e.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-8_031fa88891f4d41.jpeg)<br />
   移动端Android value与placeholder都同时偏下<br />
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-7_e0ee2fae056d509.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-8_259cdd14992a549.jpeg)<br />
4. input设置height高度与line-height为normal,设置placeholder line-height<br />
   placeholder line-height值大概是input font-size的1.3倍向上取整<br />
   移动端IOS value与placeholder都同时垂直居中了<br />
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-9_16c768a45b61f30.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/ios-input-10_11e985e491c703a.jpeg)<br />
   移动端Android placeholder垂直居中,`value稍稍偏下`<br />
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-9_04822704b225a64.jpeg)
   ![](http://img.winbaoxian.com/autoUpload/common/android-input-10_5bf7733f02a0315.jpeg)<br />

### 设备兼容
| 设备| 版本 | 问题 |
| --- | --- | --- |
| iPhone5C | 8.1.2 | 兼容 |
| iPhone5C | 10.3.1 | 兼容 |
| iPhone5S | 8.3 | 兼容 |
| iPhoneSE | 11.0 | 兼容 |
| iPhone6 | 10.1.1 | 兼容 |
| iPhone6S | 10.3.2 | 兼容 |
| iPhone7P | 10.3.2 | 兼容 |
| iPad | 10.3.1 | 兼容 |
| 小米2S | 4.1.1 | placeholder稍稍偏上 |
| 小米MIX | 6.0.1 | placeholder稍稍偏上 |
| 红米Note2 | 5.0.2 |  |
| 红米Note3 | 6.0.1 |  |
| 华为Mete8 | 7.0 |  |
| 华为TAG AL00 | 5.1 |  |
| Galaxy Note3 Lite 4G | 4.3 | 兼容 |
| Vivo X5SL | 4.4.4 | 兼容 |
| MEIZU MX5 | 5.0.1 |  |
| OPPO R9TM | 5.1 | 兼容 |
| OPPO R7S | 4.4.4 | 兼容 |

### 对情况二,height和line-heigh设置成一样时,单独做分析
<br />案例机型,IOS为iphone6 v10.1.1,Android为Galaxy Note3 Lite 4G v4.3
<br />分析在不同的font-size下,height和line-height为多少,可垂直居中
<br />一、 IOS
<br />
<br />![](http://img.winbaoxian.com/autoUpload/common/ios-search-common_1c1606a6dc3aeba.png)
<br />
<br />二、 Android
<br />
<br />![](http://img.winbaoxian.com/autoUpload/common/android-search-common_05b71014b9f82ae.png)
<br />
<br />三、 分析结果
<br />在以下情况下,input value与placeholder同时垂直居中,有些会有一些轻微的偏移,影响不大

| font-size |height | line-height |
| --- | --- | --- |
| 12px | 16px | 16px |
| 13px | 17px | 17px |
| 14px | 20px | 20px |
| 15px | 21px | 21px |
| 16px | 22px | 22px |

### 最终结果
[BX Search Bar](https://qiuguorong.github.io/bxui/dist/example/#/search)