纯css来实现一个div垂直水平居中。

可以使用Flex布局来实现div的垂直水平居中。只需要以下几行CSS代码：

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

.centered-div {
  /* 样式属性 */
}

这里，.container 是包含div的容器，它使用 display: flex; 来启用Flex布局。然后使用 justify-content: center; 和 align-items: center; 将div水平和垂直居中。最后，通过设置容器的高度为100vh（视口的高度），可以使div在页面中垂直居中。

在HTML中，可以这样使用：

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

将你想要垂直水平居中的内容放在 centered-div 中即可。