css 使div上下居中

在CSS中，要使`<div>`元素在垂直方向上居中，可以采用几种方法：

1. **Flexbox** 方式：
如果容器也是块级元素，并且支持Flexbox布局，你可以这样做：

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }
   .centered-div {
     /* 其他样式 */
   }

这里`.centered-div`将会在其父容器`.container`内垂直居中。

2. **Grid** 方式：
如果容器是网格容器，可以使用`grid-template-rows` 和 `align-self` 属性：

   .container {
     display: grid;
     place-items: center; /* 同时水平和垂直居中 */
   }
   .centered-div {
     /* 其他样式 */
   }

3. **Positioning** 方式（适用于非流式布局）：
如果需要对特定元素进行绝对定位，可以结合`position`, `top`, `bottom` 属性：

   .container {
     position: relative; /* 容器需要相对定位 */
   }
   .centered-div {
     position: absolute;
     top: 50%;
     transform: translateY(-50%); /* 把自身高度的一半向下移动 */
     /* 其他样式 */
   }