要在CSS中实现 <div> 元素的垂直居中，有几种常用的方法。
下面介绍其中两种方法：
1. 使用 Flexbox 布局：
〓〓css代码如下：〓〓
.container {
display: flex;
align-items: center; /* 在交叉轴上居中 */
justify-content: center; /* 在主轴上居中 */
}
在这个方法中，将父容器的 display 属性设置为 flex ，并使用 align-items 和 justify-content 属性来使子元素在垂直和水平方向上都居中对齐。
2. 使用绝对定位和 transform 属性：
〓〓css代码如下：〓〓
.container {
position: relative;
}
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在这个方法中，将父容器的 position 属性设置为 relative ，然后为要居中的 <div> 元素创建一个新的类（例如 .centered-div ）。通过将该元素的 position 属性设置为 absolute ，以及使用 top: 50% 、 left: 50% 和 transform: translate(-50%, -50%) 属性，可以使其相对于父容器在垂直和水平方向上均居中。
土嘎嘎技术网友情提示：上面土嘎嘎给出的例子仅提供了基本的实现方式，具体情况可能需要根据你的布局和需求进行微调和调整。同时，在某些特定的布局场景下，还有其他方法可以实现垂直居中，例如使用表格布局或使用 display: grid 属性等。