为什么我的title跑的位置不对呢？

<template>

  <me-navbar class="header" title="titel">

    <i class="iconfont icon-scan" slot="left"></i>

    <div slot="center">所搜框</div>

    <i class="iconfont icon-msg" slot="right"></i>

  </me-navbar>

</template>

<script>

import MeNavbar from "base/navbar";

export default {

  name: "HomeHeader",

  components: {

    MeNavbar

  }

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.header {

  &.mine-navbar {

    background-color: $header-bgc-translucent;

  }

  .iconfont {

    color: $icon-color-default;

    font-size: $icon-font-size;

  }

}

</style>

-------------------------

<template>

  <div class="mine-navbar">

    <div class="mine-navbar-left" v-if="$slots.left">

      <slot name="left"></slot>

    </div>

    <div class="mine-navbar-center" v-if="$slots.center">

      <slot name="center"></slot>

    </div>

    <div class="mine-navbar-right" v-if="$slots.right">

      <slot name="right"></slot>

    </div>

    <h1 class="mine-navbar-title" v-if="title" v-text="title"></h1>

  </div>

</template>

<script>

export default {

  name: "MeNavbar",

  props: {

    title: {

      type: String,

      befault: ""

    }

  }

};

</script>

 <style lang="scss" scoped>

@import "~assets/scss/mixins";

.mine-navbar {

  @include flxe-betweem();

  height: 50px;

  background-color: #fff;

  &-left {

    margin-left: 10px;

    ~ .mine-navbar-right {

      position: static;

    }

  }

  &-center {

    flex: 1;

    margin: 0 10px;

    ~ .mine-navbar-right {

      position: static;

    }

  }

  &-right {

    position: absolute;

    right: 0;

    @include flex-center();

    height: 100%;

    margin-right: 10px;

  }

  &-title {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 20%;

    right: 20%;

    @include flex-center();

    // line-height: 50px;

    font-size: 18px;

    @include ellipsis();

  }

}

</style>