将一个div放到中上

将一个`<div>`元素放置在页面的垂直居中并且相对于其容器元素水平居中，通常可以使用CSS Flexbox或Grid布局以及一些定位技术来实现。这里是一个简单的例子：

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  position: relative;     /* 如果容器不是静态定位 */
}

.div-to-center {
  width: 200px; /* 可调整尺寸 */
  height: 100px; /* 可调整尺寸 */
  background-color: lightblue;
}
</style>

<div class="container">
  <div class="div-to-center">这是一个div</div>
</div>

在这个示例中，`.container`设置了`display: flex;`使其成为一个flex容器，然后通过`justify-content: center;`和`align-items: center;`实现了元素的居中对齐。

如果你想让`.div-to-center`直接相对于文档流的父级元素居中，你可以去掉`.container`的样式，只保留`.div-to-center`的`position: absolute; top: 50%; transform: translateY(-50%);`来达到目的。