1. Center vertically
display:flex;
flex-direction:column; //Column vertical
align-items: center; //Center
In this way, in the entire view, all elements will be vertically centered
<view class="container">
<image class="user-avatar" src="/images/avatar.jpg"></image>
<text>hello 李破</text>
<view>
<text>Start the Mini Program Journey</text>
</view>
</view>
.container{
display:flex;
flex-direction: column;
}
2.Text is vertically centered
wxss
.moto-container{
border:1px solid #405f80;
width:200rpx;
height:80rpx;
border-radius: 5px;
text-align: center;
}
.motorcycle{
font-size:22rpx;
font-weight: bold;
line-height: 80rpx;
color:#405f80;
}
wxml
<view class="moto-container">
<text class="moto">Start the Mini Program Journey</text>
</view>
The line-height of the text is the same as the height of the view
3. Set full screen adaptive height and background color
Method 1:
The applet wxml hides an outermost page tag, here you need to add a height of 100% to the page and then set the background color to the
page page{
height:100%;
background-color: #b3d4db;
}
Method 2:
If the mobile phone style that needs to display the battery including the time signal at the top also shows the background, it needs to be set in app.json
{
"pages": [
"pages/welcome/welcome"
],
"window": {
"navigationBarBackgroundColor": "#b3d4db"
}
}
4. rpx px unit The design drawing is subject to iphone6. If the design drawing is 500px, then use the iphone6 in the WeChat developer tool to set the width to 500rpx
Because in iphone6 1px=1rpx other mobile phones will adapt
Generally, if you need to do adaptive, use rpx, but for others, such as highlighting the title text, use px