学习uniapp 标题内容（文字、图片）水平垂直居中

（1）.标题文字垂直方向不居中

使用text-align: center;可以让文字在盒子的水平方向居中

文字垂直方向的居中就需让要盒子在垂直方向上居中

1.第一种解决方法 ：可以考虑让父元素变成 flex 容器，子元素使用margin自适应布局。

父元素:{

display:flex;

}

子元素:{

margin:auto;

}

<template>
	<view class="title">
		<view class="textbox">
			<view class="text">这是标题内容</view>
		</view>
	</view>
</template>

<script>

</script>

<style>
	.title {
		height: 80rpx;
		background-color: aqua;
	}

	.textbox {
		width: 100%;
		height: 80rpx;
		
		display: flex;
	}

	.text {
		font-size: 26rpx;
		font-weight: 900;
		/* 加粗 */
		color: white;

		margin: auto;
	}
</style>

效果图如下:

2. 第二种解决方法 ：可以考虑让父元素变成 flex 容器，使用水平垂直居中方法让子元素在父元素中居中

父元素:{

display:flex;

justify-content: center;

align-items: center;

}

<template>
	<view class="title">
		<view class="textbox">
			<view class="text">这是标题内容</view>
		</view>
	</view>
</template>

<script>

</script>

<style>
	.title {
		height: 80rpx;
		background-color: midnightblue;
	}

	.textbox {
		width: 100%;
		height: 80rpx;
		display: flex;
		/* 启用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.text {
		font-size: 26rpx;
		font-weight: 900;
		color: white;
	}
</style>

 效果图如下：

 （同样可以实现文字的水平垂直居中）

但是有时候标题栏中往往不止只有中间的文字，当标题栏加入了其他的元素后，文字在水平方向就不一定居中了，那该怎么办呢！

（2）.标题栏中有其他元素，标题文字不居中

我的解决方法是将标题栏分为三个盒子 左右两边的盒子宽度相等 标题放在中间的盒子中 这样子就能居中了

<template>
	<view class="title">
		<!-- 将盒子分为左中右三个部分 左右盒子宽度相等 标题放在中间的盒子中  -->
		<view class="title_leftbox">
			
			<!-- 盒子中可以添加内容  内容之间可以用margin 分隔  -->
			<!-- 如果不需要请不要删除 否则中间的盒子不居中 -->
		</view>
		
		<view class="title_middlebox">
			<view class="titlenr_text1">这是标题内容</view>
		</view>
		
		<view class="title_rightbox">
			<!-- 盒子中可以添加内容  内容之间可以用margin 分隔  -->
			<!-- 以下放了文本和图片示例 -->
			<view class="title_text2">返回</view>
			<view class="title_imgbox">
				<image class="title_img" src="../../static/logo.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.title {
		background-color: dodgerblue;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2%;
	}

	.title_leftbox,
	.title_rightbox {
		flex: 1;
		/* 使它们占据相同的空间 */
		display: flex;
		align-items: center;
		/* 确保子元素垂直居中 */
	}

	.title_leftbox {
		background-color: pink;
		height: 15rpx;
		/* 如果没有内容盒子可以空着 */
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 使文本垂直居中 */
		text-align: center;
		/* 确保文本水平居中 */
	}

	.title_text2 {
		    margin-right: 10%;
		    margin-left: 25%;
	}

	.title_imgbox {
		display: flex;
		align-items: center;
		/* 使图片垂直居中 */
	}

	.title_img {
		width: 34rpx;
		height: 34rpx;
	}
</style>

效果图如下：