图片文字居中显示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<template>     <view class="content">         <view class="banner">             <image :src="banner" mode="widthFix" class="banner_img"></image>             <view class="banner_img_text">LV</view>         </view>               </view> </template>   <script>     export default {         data() {             return {                     banner:"/",             }         },         methods: {                       }     } </script>   <style lang="scss">     .banner{         display:flex;         align-items: center;//子元素垂直居中         justify-content: center;//子元素水平居中     }     .banner_img{         width: 100%;     }     .banner_img_text{         color: #FFF;         z-index: 1;         text-align: center;         position: absolute;     }   </style>