css

弹性盒垂直水平居中

display: flex;
  justify-content: center;
  align-items: center;

横向弹性盒

.horzFlexBox{
display: flex;
align-items: center;
justify-content: space-around;
}

//纵向弹性盒
.columnFlexBox{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

用户登录信息展示

<div class="userBox">
			<!-- 左侧 用户头像和用户名 -->
			<div class="le">
				<img src="@/static/city/banner.png" class="userIcon" />
				<!-- 一行文本 -->
				<span v-if="false">userName</span>
				<!-- 一行或者多行 -->
				<div class="userInfo">
					<span v-if="true">userName</span>
					<span>tips222222222222222</span>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="rg">
				<span v-if="true">退出</span>
				<img src="@/static/city/banner.png" alt class="icon" v-if="true" />
			</div>
		</div>

//scss
.userBox {
		width: 90%;
		height: 100px;
		margin: 0 auto;
		border: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.le {
			background: red;
			// 一行或多行start
			display: flex;

			// 一行或多行end
			.userIcon {
				width: 80px;
				height: 80px;
				vertical-align: middle;
				border-radius: 50%;
				margin-right: 20px;
			}

			// 一行文本
			.userName {
				vertical-align: middle;
			}

			// 一行或多行
			.userInfo {
				display: flex;
				flex-direction: column;
				// 文字居中 || 文字左对齐
				// align-items: center;
				justify-content: center;
			}
		}

		.rg {
			background: yellow;
			margin-right: 20px;

			.icon {
				width: 40px;
				height: 40px;
				vertical-align: middle;
				border-radius: 50%;
				margin-left: 20px;
			}

			span {
				vertical-align: middle;
			}
		}
	}

列表展示

<div class="list">
			<div class="list_item" @click='goPage(url)'>
				<img src="@/static/city/huangjiaobiao.png" alt="">
				<span>我的</span>
				<span v-if='true'>1</span>
				<img src="@/static/city/huangjiaobiao.png" alt="" class='back'>
			</div>
			<div class="list_item" @click='goPage(url)'>
				<img src="@/static/city/huangjiaobiao.png" alt="">
				<span>我的</span>
				<span v-if='true'>1</span>
				<img src="@/static/city/huangjiaobiao.png" alt="" class='back'>
			</div>
</div>

.list {
		width: 90%;
		height: 380px;
		box-shadow: 0px 0px 30px rgba(110, 142, 196, 0.1);
		opacity: 1;
		border-radius: 20px;
		margin: 0 auto;

		.list_item {
			height: 94px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			border-bottom: 0.7px solid #E4E4E4;
			position: relative;

			img {
				width: 40px;
				height: 40px;

				// 第一张图片
				&:nth-child(1) {
					margin: 0 29px 0 25px;
				}
			}

			span {
				display: inline-block;
				font-size: 26px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 37px;
				color: rgba(51, 51, 51, 1);

				// 我的
				&:nth-child(2) {
					margin-right: 31px;
				}

				// 徽标 or num
				&:nth-child(3) {
					display: inline-block;
					width: 40px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					color: rgba(255, 255, 255, 1);
					background: rgba(243, 75, 69, 1);
					border-radius: 50%;
				}
			}
		}

		.list_item:last-child {
			border: none;
		}


	}

	// 箭头
	.back {
		position: absolute !important;
		right: 17px !important;
		width: 10px !important;
		height: 19px !important;
	}

align-item:center;和overflow-y：auto;冲突

垂直方向滚动条只负责显示从下方溢出的内容，你设置'align-items:center'，发生溢出时上下溢出的长度相等，这样滚动只能显示在下方溢出的那一半内容，从上方溢出的就不能显示了。
 

text-align不生效

设置display：inline-block/inline