css---相对定位+绝对定位实现元素居中

效果图

实现方式

	<view class="img-wrap">
        <image mode="aspectFill" class="img-bg" src="{{userInfo.avatarUrl}}"></image>
        <view class="info-wrap">
            <image src="{{userInfo.avatarUrl}}" />
            <view class="nick-name">xxx</view>
        </view>
    </view>

	.img-wrap{
        position: relative;
        .img-bg{
            width: 100%;
            height: 50vh;
            filter: blur(10rpx);
        }
        .info-wrap{
            position: absolute;
            top: 50%;
            left: 50%; // 关键点！！
            transform: translateX(-50%);  // 关键点！！  或者 transform: translate(-50%,-50%) ，上下、左右都居中
            text-align: center;
            image{
                width: 150rpx;
                height: 150rpx;
            }
        }
    }