css设置div大小随浏览器大小同比例变化且位置同浏览器变化

可以使用CSS3中的flexbox布局来实现这个效果。

首先，在HTML中创建一个div容器，例如：

<div class="container">
  <!-- 内容 -->
</div>

然后，在CSS中设置容器的样式：

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

解释一下上面的代码：

- `display: flex;` 将容器设置为flexbox布局
- `justify-content: center;` 和 `align-items: center;` 将容器内的内容水平和垂直居中
- `width: 100vw;` 和 `height: 100vh;` 将容器的宽度和高度设置为视口宽度和高度的100%

这样，当浏览器窗口大小改变时，容器的大小也会随之改变，并且容器内的内容也会保持居中位置。

如果想要容器内的内容也随着容器大小改变而变化，可以使用CSS3中的`flex-grow`属性。例如，将内容包裹在一个内部容器中：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

然后，在CSS中设置内部容器的样式：

.content {
  flex-grow: 1;
}

这样，当容器大小改变时，内部容器的大小也会随之改变，并且填充整个容器。