uniapp 子组件没有高度,却要设置里面内容水平垂直居中
场景:在无数据的子组件中,有图片提示,该页面无数据,想要将这个图片水平垂直居中
父组件
<!-- 无内容 -->
<template v-else>
<no-thing></no-thing>
</template>
components:{
noThing
},
子组件
<template>
<view class="nothing">
<image src="../../static/common/nothing.png" mode="widthFix"></image>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.nothing{
background: #FFFFFF;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
image{
width: 50%;
}
}
</style>
可以在图片的父元素上同时使用定位方式和flex布局