小程序 view居中

view水平居中办法

ps：我觉得垂直居中也差不多，换个方向基本上能用。

1. 使用margin

    position: relative;	/* relative可以相对于父对象居中 十分nice */
    margin:0 40%;

2. 使用绝对定位

    position: absolute;	 /* !!!这时候请不要设置width,否则就会失效!!! */
    left: 0rpx;			 /* 如果不想占那么宽的位置，可以使用margin增加两旁间隔 */
    right: 0rpx;
    bottom: 0rpx;

3. transform
   老意大利炮了，你以为呢？

    height: 47rpx;					/* 特意把view的长宽粘出来，因为用了transform根本不care这些*/
    width: 69rpx;
    border-radius: 5rpx;    
    position: relative; 			/* 相对于父级的居中*/
    left:50%; top:65%; 				/* left不一定要求50%，可以依据内容及transform参数进行调整*/
    transform:translate(-50%,-0%); 	/*  translate(x,y)*/
    margin:30rpx 0;

4. 使用flex——大佬的炫技
   组合技：display+flex-direction+align-items/align-content(区别)+justify-content

“为什么老问我怎么居中，你就不会用flex吗？”
“别别别别这样写，用flex多方便呀。”

.full-width {
  width: 100%;
}
.center-view {
  display: flex;
  flex-direction: column;
  align-items: center;  
  justify-items: center;
}
.center-view > image {
/*引用的image的宽高,*/
  width: 533px;
  height: 300px;
  margin: 10px;
}

<!--居中于这个full-width view-->
<view class="full-width">
	<!--这个view会在屏幕中间-->
    <view class="center-view">
    	<!--别忘了给image赋宽高,不然可能会不显示-->
      	<image mode="scaleToFill" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1694485981,3168459422&fm=26&gp=0.jpg"/>
      	<view>
        	我是居中的文字
      	</view>
    </view>
  </view>