不固定盒子宽高，盒子居中

您可以使用 CSS 的 flex 布局来实现这个效果。具体实现方法如下：

1. 首先，将父级元素设置为一个 flex 容器，可以设置为 display: flex;。

2. 然后，将子元素设置为一个 flex 项目，可以设置为 flex: 1;。这样，子元素就会按照等比例分配剩余空间，从而实现宽高不固定的效果。

3. 最后，使用 justify-content 和 align-items 属性来设置子元素的水平和垂直居中。可以设置为 justify-content: center; 和 align-items: center;。

以下是一个示例代码：

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

.item {
  flex: 1;
}

在上述代码中，我们将容器设置为 flex 容器，并将子元素设置为 flex 项目。然后，使用 justify-content 和 align-items 属性来将子元素水平和垂直居中，同时设置容器高度为 viewport 高度（100vh）。

希望这个回答能够帮到您。

相关问题

微信小程序固定定位的盒子宽高怎么兼容各种手机屏幕

微信小程序中可以使用百分比或者vw/vh来设置盒子的宽高，这样可以让盒子根据不同的屏幕大小自适应调整大小，从而达到兼容不同手机屏幕的效果。具体的代码如下：

.box {
  width: 50vw; /* 盒子宽度为屏幕宽度的50% */
  height: 10vh; /* 盒子高度为屏幕高度的10% */
  position: fixed; /* 固定定位 */
  bottom: 20px; /* 距离底部20像素 */
  left: 50%; /* 盒子左侧与屏幕中心对齐 */
  transform: translateX(-50%); /* 盒子水平居中对齐 */
}

通过使用百分比和vw/vh单位，可以实现盒子的自适应大小，并且使用固定定位的方式可以让盒子始终保持在屏幕的固定位置。

css盒子居中

要将一个盒子居中，可以使用以下 CSS 属性和值：

1. 设置要居中的盒子为块级元素，使用 `display: block;`
2. 设置盒子的宽度为固定值或百分比，使用 `width: 300px;` 或者 `width: 80%;`
3. 设置盒子的左右外边距为 `auto`，使用 `margin: 0 auto;`

例如，下面是一个居中的示例代码：

.box {
  display: block;
  width: 300px;
  margin: 0 auto;
}

这将使一个宽度为 300 像素的盒子在其父容器中水平居中显示。如果你想垂直居中，还需要使用其他技巧。