选框和文字水平居中展示

使用uniapp开发小程序时，遇到这样的一个样式问题：使用radio-group组件，radio中包含一个div,div高度没有设定，可根据后台返回内容的多少进行扩展，只限制了宽度，div后面有个编辑的图标，如何使这三个进行水平居中呢？下面是我的代码

<template>
    <div>
        <div class="all" :style="{'padding-top': topPaddingHeight}">
            <div class="top"> 选择地址 </div>
        </div>
        <div class="address-list">
            <radio-group @change="radioChange">
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in addressList" :key="index">
                        <div class="radio-icon">
                            <radio :value="item.id"  :checked="item.defaultAddress" />
                        </div>
                        <div class="single-address-item">
                            <div class="address-item">{{item.clientArea}}{{item.clientAddress}}
                                <div v-if="item.flash" class="address-item-flash">(需要叫闪送)</div>
                                <div v-if="!item.flash" class="address-item-flash">(追加赏金{{item.bounty}}元)</div>
                            </div>
                            
                            <div> {{item.clientName}} {{item.clientPhone}}</div>
                        </div>
                        <image src="../../static/image/edit.png" class="edit-image"></image>
                        <div style="height: 20px;width: 100%;"></div>
                    </label>
                    
                    
                </radio-group>
        </div>
        <div class="all-bottom">
            <button type="primary" style="background-color: #479eff;" @click="toInsertAddress">新增地址</button>
        </div>
    </div>
    

</template>

<script>
    import {selectAddressByOpenid} from '../../api/address.js'
    export default {
        data() {
            return {
                topPaddingHeight: '',
                openid:'',
                addressList:{}
            }
        },
        onLoad() {
            this.topPaddingHeight = uni.getStorageSync("topPaddingHeight")
            this.openid = uni.getStorageSync("openid")
            this.getAllAddress()
        },
        methods: {
            toInsertAddress(){
                uni.navigateTo({
                    url:'./addAddress'
                })
            },
            getAllAddress(){
                let list ={
                    openid:this.openid
                }
                selectAddressByOpenid(list).then((res1) => {
                            //成功结果
                            console.log(res1)
                            this.addressList = res1.data
                        
                        }).catch(err => {
                            //失败结果
                            console.log(err)
                        });
            }
        }
    }
</script>

<style>
    .all {
        width: 100%;
        padding-top: 2px;
        background: linear-gradient(90deg, #1acafd, #1f72ff);
    }
    
    .top {
        height: 44px;
        text-align: center;
        font-size: 22px;
    }
    .all-bottom{
        position: absolute;
        width: 94%;
        margin-left: 3%;
        
        bottom: 0px;
    }
    .address-list{
        width: 100%;
        padding-bottom: 10px;
        font-size: 18px;
    }
    .address-item{
        display: inline-block;
    }
    .address-item-flash{
        display: inline-block;
    }
    .radio-icon{
        margin-left: 10px;
        display: inline-block;
        text-align: center
    }
    .single-address-item{
            margin-left: 15px;
            display: inline-block;
            width: 70%;
            
        
    }
    .edit-image{
        display: inline-block;
        width: 20px;
        height: 20px;
    }
</style>

样式如下

试过将选框的display改成inline-flex但是没有效果，将div中调整为相对定位，也不行，有什么好的解决方案吗？！

水平垂直居中的方式有很多种，欢迎访问本人博客，里面写的很详细
http://t.csdn.cn/2dC9k

你要的是垂直居中吧？
用flex布局
display:flex;
justify-content: center; //水平居中
align-items: center; //垂直居中