html

<view>
	<view class="da-flex">
		<view class="da-flex-top">
			<view class="da-img">
				<img src="xxx.png"/>
			</view>
		</view>
		<view class="da-flex-bottom">
			111
		</view>
	</view>
</view>
Copy the code

css

.da-flex{
	display: flex;
	flex-flow: column;
	flex-direction:  column;
	width: 100%;
	height: 98vh;
	border: 1px solid #5F91FF;
	background-color: #5F91FF;
}
.da-flex .da-flex-top{
	flex: auto;
	position: relative;
	border: 1px solid salmon;
}
.da-flex .da-flex-bottom{
	flex: 0 0 600px;
	border: 1px solid #FFFF00;
	background-color: #FFFF00;
}
.da-flex .da-flex-top .da-img{
	width: 300px;
	height: 300px;
	text-align: center;
	background-color: aquamarine;
	position: absolute;
	top: 40%;
	margin: 0 auto;
	left: 48%;
	transform: translate(-40%, -48%);
}
Copy the code

On this basis, fine-tuning can achieve other effects

Height: 100vh; In the relative positioning of percentages, you can set the height to something like 100vh, so that when the bottom is fixed at 600px, the top can be filled with flex-grow and then centered.

Original content reproduced please indicate the source