微信小程序怎么让盒子处在正中

可以使用flex布局，将父元素设置为display: flex; justify-content: center; align-items: center;，子元素设置为width和height，并设置margin: auto;即可让盒子居中显示。

示例代码：

<view class="container">
  <view class="box"></view>
</view>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 200rpx;
  height: 200rpx;
  margin: auto;
  background-color: #ccc;
}

相关问题

微信小程序里怎么让盒子自适应宽度且居中

在微信小程序中，可以使用以下 WXML 和 WXSS 代码来让盒子自适应宽度且居中：

WXML 代码：

<view class="box"></view>

WXSS 代码：

.box {
  width: auto; /* 让盒子自适应宽度 */
  margin: 0 auto; /* 让盒子居中 */
}

在微信小程序中，`view` 标签相当于 HTML 中的 `div` 标签，用来定义一个盒子容器。`width: auto` 让盒子的宽度自适应，而 `margin: 0 auto` 则让盒子左右居中。

微信小程序控制盒子显示隐藏_微信小程序 实现动态显示和隐藏某个控件

要实现在微信小程序中动态显示和隐藏某个控件，可以使用 wx:if 或者 hidden 属性。

1. 使用 wx:if

在需要控制显示和隐藏的控件上添加 wx:if 属性，并绑定一个变量，当该变量为真时，控件才会被渲染出来。

例如，下面的代码中，当 showBox 变量为真时，盒子才会显示出来：

<view wx:if="{{showBox}}">这是一个盒子</view>

在 JavaScript 中，可以通过修改 showBox 变量的值来动态控制盒子的显示和隐藏：

data: {
  showBox: false
},
toggleBox: function() {
  this.setData({
    showBox: !this.data.showBox
  })
}

2. 使用 hidden 属性

hidden 属性可以用来控制控件的隐藏，当 hidden 属性的值为真时，控件将被隐藏。

例如，下面的代码中，当 showBox 变量为假时，盒子将会被隐藏：

<view hidden="{{!showBox}}">这是一个盒子</view>

在 JavaScript 中，可以通过修改 showBox 变量的值来动态控制盒子的显示和隐藏：

data: {
  showBox: true
},
toggleBox: function() {
  this.setData({
    showBox: !this.data.showBox
  })
}