uniapp8种方式让子布局居中

写布局的时候经常会用到居中，有的时候是线性有的时候是相对布局，那么居中的方式就比较灵活，大致的写了7种可以剧中的方式

首先定义个布局，要让item在box里面居中显示

<view class="box">
	<view class="item">居中</view>
</view>
<view class="boxr">
	<view class="item">居中</view>
</view>

• 常用的父布局让子布局剧中

    .box {
		//父容器帮助剧中，子容器固定大小100rpx
		display: flex;
		justify-content: center;
		align-items: center;
		//
		width: 400rpx;
		height: 400rpx;
		background-color: #666666;
		margin-left: 100rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
	
		.item{
			width: 100rpx;
			height: 100rpx;
			box-sizing: border-box;
			font-size: 10rpx;
			overflow: hidden;
			background-color: #ff0000;
			
		}
	}

• 子容器固定长度的话，使用计算好的边距居中

.box{
		//子容器margin控制剧中，子布局固定长度
		display: flex;
	
		//
		width: 400rpx;
		height: 400rpx;
		background-color: #666666;
		margin-left: 100rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
	
		.item{
			width: 100rpx;
			height: 100rpx;
			margin-top: 150rpx;
			margin-left: 150rpx;
			box-sizing: border-box;
			font-size: 10rpx;
			overflow: hidden;
			background-color: #ff0000;
			
		}
	}

• 子容器不设置高宽，使用边距让其居中，且达到高宽都是100rpx

.box {
		//子容器margin控制剧中，不设置高宽，同样达到动态100rpx高宽
		display: flex;

		//
		width: 400rpx;
		height: 400rpx;
		background-color: #666666;
		margin-left: 100rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
	
		.item{
			margin: 150rpx;
			box-sizing: border-box;
			font-size: 10rpx;
			overflow: hidden;
			background-color: #ff0000;
			
		}
	}
	

• 相对布局的情况下，子容器固定长度的话，使用计算好的边距居中

.boxr {
		//相对布局
		//使用子布局固定长top /margin
	    position: relative;
		//
		width: 400rpx;
		height: 400rpx;
		background-color: #666666;
		margin-left: 100rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
	
		.item{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			top:150rpx;
			left: 150rpx;
			//margin: 150rpx; 如果固定大小也可以使用margin
			box-sizing: border-box;
			font-size: 10rpx;
			overflow: hidden;
			background-color: #ff0000;
			
		}
	}

• 相对布局的情况下，子容器不设置高宽，使用边距让其居中，且达到高宽都是100rpx

.boxr {
		//相对布局
		//子布局不固定长度，top 
		
	    position: relative;
		//
		width: 400rpx;
		height: 400rpx;
		background-color: #666666;
		margin-left: 100rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
	
		.item{
			position: absolute;
			
			top:150rpx;
			left: 150rpx;
			right: 150rpx;
			bottom: 150rpx;
			box-sizing: border-box;
			font-size: 10rpx;
			overflow: hidden;
			background-color: #ff0000;
			
		}
	}

• 当我们不希望使用计算的边距居中或者不能直接知道父布局的高宽，子容器固定100rpx 100rpx的时候

.box{
	 display: flex;
	 width: 400rpx;
	 height: 400rpx;
	 margin-left: 100rpx;
	 margin-top: 100rpx;
	 background-color: #888888;
	 .item{
	  display: flex;
	  width: 100rpx;
	  height: 100rpx;
	  margin: auto;
	  font-size: 10rpx;
	  overflow: hidden;
	  background-color: #ff0000;
	 }
	}

• 相对布局，当我们不希望使用计算的边距居中或者不能直接知道父布局的高宽，子容器固定100rpx 100rpx的时候

//不使用父布局的高宽，动态剧中
	.boxr{
	 display: flex;
	 position: relative;
	 width: 400rpx;
	 height: 400rpx;
	 margin-left: 100rpx;
	 margin-top: 100rpx;
	 background-color: #888888;
	 .item{
	  display: flex;
	  position: absolute;
	  width: 100rpx;
	  height: 100rpx;
	  top: 10rpx;
	  right: 10rpx;
	  bottom: 10rpx;
	  left: 10rpx;
	  font-size: 10rpx;
	  margin: auto;
	  overflow: hidden;
	  background-color: #ff0000;
	 }
	}

• 相对布局，不限制子容器大小，子容器自己居中

.boxr{
	 display: flex;
	 position: relative;
	 width: 400rpx;
	 height: 400rpx;
	 margin-left: 100rpx;
	 margin-top: 100rpx;
	 background-color: #888888;
	 .item{
	  display: flex;
	  position: absolute;
	 top: 50%;
	 left: 50% ;
	transform:translate(-50%, -50%);
	  background-color: #ff0000;
	 }
	}

• 当然也可以通过页面计算属性动态来控制。