場景:在無數據的子組件中,有圖片提示,該頁面無數據,想要將這個圖片水平垂直居中
父組件
<!-- 無內容 -->
<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布局