在 Web 开发中，垂直居中是一种常用的布局技术，可以让 div 块在水平方向上垂直居中。本文将介绍如何使用 CSS 进行 div 块垂直居中。
1. 定义 div 块
在一个 HTML 文件中，大家可以使用 CSS 来定义 div 块，例如：
<div class=”居中”>
这是垂直居中的 div 块内容。
</div>
在上面的代码中，大家使用了一个名为“居中”的 CSS 类，它定义了一个包含 div 块的 HTML 元素，并设置了一个名为“居中”的 CSS 属性，该属性使 div 块垂直居中。
2. 设置 div 块的居中位置
为了将 div 块垂直居中，大家需要将其放置在屏幕的垂直中心位置。大家可以使用 CSS 的“position”属性，该属性可以设置元素的居中位置。例如：
.居中 {
position: relative;
在上面的代码中，大家使用了一个名为“居中”的 CSS 类，它定义了一个包含 div 块的 HTML 元素，并设置了一个名为“居中”的 CSS 属性，该属性使 div 块垂直居中。
.居中 {
position: relative;
top: 50%;
transform: translateY(-50%);
在上面的代码中，大家使用了“top”属性将 div 块放置在屏幕的垂直中心位置，然后使用“transform”属性将其转换为 translateY(-50%)操作，以使元素垂直居中。
3. 检查居中效果
最后，大家可以使用 CSS 的“检查”属性来检查垂直居中效果。例如：
.居中 {
position: relative;
top: 50%;
transform: translateY(-50%);
.居中：after {
content: “”;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-left: 100px solid transparent;
border-right: 100px solid transparent;
.居中：hover:after {
content: “”;
在上面的代码中，大家使用了一个名为“:after”的伪元素来显示垂直居中效果，它使用 translateX(-50%)操作将元素移动到屏幕的右侧，以使其垂直居中。
通过使用 CSS 的“position”属性和“transform”属性，大家可以轻松地实现 div 块垂直居中效果。只需定义 div 块，然后将其放置在屏幕的垂直中心位置，并设置适当的居中位置和位置属性即可。最后，使用 CSS 的“检查”属性来检查垂直居中效果。