如何实现以下情景：

外部盒子先使用display:flex; justify-content: center; align-items: center; 将文字所在的内容盒子水平垂直居中于外部盒子中间，再将内容盒子display:flex; align-items: baseline; 将内容盒子里面的文字基于第一个文字的底部对齐。

html部分

<div class="box">
	<div class="content">
		<div class="num">8</div>
		<div class="unit">折</div>
	</div>
</div>

css部分

.box{
	background-color: #4773DC;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.content{
		display: flex;
		align-items: baseline;
		.num{
		 font-size: 50rpx;
		}
		.unit{
			font-size: 20rpx;
		}
	}
}