實現去哪網中的頭部佈局

（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等移動子元素。