实现去哪网中的头部布局

（1）首先列出相应的代码，即：

<template>
  <div class="header">
    城市选择
    <i class="el-icon-arrow-left"></i>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
  .header{
    position: relative;
    height: 1.5rem;
    line-height: 1.5rem;
    background: rgb(43, 214, 226);
    text-align: center;
  }
  .el-icon-arrow-left{
    position: absolute;
    top: 0.24rem;
    left: 0;
  }
</style>

（2）将line-height设置为对象的height时，此对象中的文字则会垂直居中。但给若给这个对象设置border则会出现问题。

（3）将父元素position设置为relative，而子元素设置为absolute时，子元素被限制在父元素的区域中。可以根据top、left等移动子元素。