CSS 实现响应式十字架形状：始终保持屏幕中央

您可以使用 CSS 和 HTML 来实现一个响应式十字架形状，始终保持在屏幕中央。

以下是一个示例代码：

HTML 代码：

<div class='cross'></div>

CSS 代码：

.cross {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 2px solid black;
}

.cross::before,
.cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80px;
  width: 2px;
  background-color: black;
}

.cross::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.cross::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

这段代码中，div 元素的类名为 'cross'，使用 position: fixed 将其固定在屏幕上。top: 50% 和 left: 50% 将其定位在屏幕的中心位置。transform: translate(-50%, -50%) 用于微调位置，使其准确居中。

使用伪元素 ::before 和 ::after 创建两个竖直和水平的线条。通过设置 content: '' 来显示伪元素，position: absolute 将其相对于父元素进行定位，并使用 transform: translate(-50%, -50%) 将其居中。

加上适当的样式可以实现屏幕大小变化时十字架保持在屏幕中间位置的效果。