實現去哪網中的搜索框佈局佈局

（1）先放出相應的代碼，即：

 1 <template>
 2   <div class="search">
 3     <input class="search-input" type="text" placeholder="請輸入..." />
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'hhh',
10   data () {
11     return {
12       value: ''
13     }
14   }
15 }
16 </script>
17 
18 <style lang="stylus" scoped>
19   .search
20     background: #cccccc
21     height: 3rem
22     position: relative
23     .search-input
24       position: absolute
25       box-sizing: border-box
26       height: 1.5rem
27       line-height: 1.5rem
28       width: 100%
29       text-align: center //實現文字左右居中顯示 30       border-radius: .36rem //出現圓角
31       padding: 0 .3rem
32       left: 0
33       top: 0
34       bottom: 0
35       right: 0
36       margin: auto
37 </style>

（2）將父元素設置爲relative，子元素設置爲absolute，同時讓子元素的top、left等設置爲0，最後將margin設置爲auto，便可實現父元素方框中的input框上下對齊。

（3）將height和line-height設置爲同樣高，能夠實現裏面的文字上下對齊；

（4）同時設置box-sizing和padding能夠實現input框中文字滿了的時候不會溢出到邊框;

（5）設置border-radius將會使方框出現圓角；

如下是效果圖：