div 上下居中对齐

在HTML中，要让`<div>`元素在页面上既垂直也水平居中对齐，可以采用几种方法。这里我会介绍两种常见的方法：

1. **Flexbox**布局：
如果你的项目支持CSS3 Flexbox，你可以将包含`<div>`的容器设置为`display: flex; justify-content: center; align-items: center;`。这会使内部的`<div>`在行和列方向上都居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 或者设定一个具体的高度 */
}

然后把`<div>`放入这个`.container`里即可。

2. **Grid**布局（同样需要CSS3支持）：
使用CSS Grid，你可以创建一个网格，然后让`<div>`位于交叉点（grid-line）上。设置`.container`的样式如下：

.container {
  display: grid;
  place-items: center; /* 这会在垂直和水平方向上居中 */
  height: 100%; /* 或者设定一个具体的高度 */
}

对于不支持Flexbox和Grid的老版浏览器，你可能需要借助一些CSS技巧，比如使用绝对定位(`position: absolute`)结合百分比宽度和top/bottom设置，但这通常会增加代码复杂度。