css实现屏幕垂直居中

要使用CSS实现屏幕垂直居中，可以使用Flexbox或Grid布局。

以下是两种方法的示例代码：

Flexbox 方法：

/* 使用Flexbox实现垂直居中 */
.center-flex {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 视窗高度 */
}

<!-- 应用Flexbox居中的容器和子元素 -->
<div class="center-flex">
  <div>居中内容</div>
</div>

Grid 方法：

/* 使用Grid实现垂直居中 */
.center-grid {
  display: grid;
  place-items: center; /* 水平和垂直居中的简写 */
  height: 100vh; /* 视窗高度 */
}

<!-- 应用Grid居中的容器和子元素 -->
<div class="center-grid">
  <div>居中内容</div>
</div>

以上两种方法均可使元素在屏幕上垂直居中。