css布局-float与postion

今天切页面，想要做一个‘地址列表’居中的效果

首先想到的是前面icon使用浮动float，然后地址列表水平居中，但是效果却并不是想要的

float浮动，还是会占据空间。

后选择使用定位，定位不占空间

将icon使用absolute绝对定位到该位置，地址列表水平居中即可。抽象代码如下

<style>
    #top{padding:0 32px;height:88px;position:relative;display:flex;align-items:center;justify-content:center;background:#fff; font-size: 36px;}
    #top>div{height:100px;position:absolute;font-size:48px;line-height:100px;width:86px;text-align:center;left:0;}
</style>
<div id="top">
    <div onclick="history.go(-1)">
        <i class="icon icon-angle-left"></i>
    </div>
    {{ title }}
</div>