完美解决iconfont svg格式的定位问题

因为使用svg格式有很多好处，虽然我只缠它的身体哈哈哈哈。但是相比较于iconfont的传统格式，首先它不是文本，所以不能直接使用text-align，因为要大量的使用居中对齐，所以显然使用svg对于之前的我是个灾难。

刚刚都做到第二个页面了，第一个页面的svg我并没有对齐哈哈哈，刚刚自己琢磨了很久，试着在外面包裹了div，才让它动一下。

可是还有一个致命的问题，就是在放大svg的时候，他不会随着中心的放大，而是在其上方有一个中心点。这就难办了~

可是能难倒我吗？显然不可能。打开f12，发现丫的svg居然一个图标其实又好几部分组成，然后找到它最大的一部分，发现是svg.icon。所以可以开始写样式了。核心就是把svg当成一个块级元素去定位。好好理解~

<template>
    <div class="header">
        城市选择
        <div class="iconBox">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconfanhui1"></use>
            </svg>
        </div>
        
    </div>
</template>

<script>
export default {
    name:"CityHeader"
}
</script>

<style lang="stylus" scoped>
    @import "~styles/varibles.stylus"
    .header
        position relative
        height 0.86rem
        line-height .86rem
        overflow hidden
        text-align center
        color #fff
        background $bgColor
        font-size .32rem
        .iconBox
            height .86rem
            width .86rem
            display inline
            position absolute
            top 0
            left 0
            margin 0 0 0 .3rem
            .icon 
                position absolute
                top 0
                left 0
                bottom 0
                right 0
                margin auto 0
                width .4rem
                height .4rem
</style>