CSS实现响应式十字架形状，始终居中显示

<!DOCTYPE html>
<html>
<head>
<title>十字架形状</title>
<style>
body {
margin: 0;
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 占满整个视窗高度 */
background-color: #f2f2f2;
}
<p>.cross {
width: 200px;
height: 200px;
position: relative;
}</p>
<p>.cross::before,
.cross::after {
content: &quot;&quot;;
position: absolute;
background-color: #333;
}</p>
<p>.cross::before {
width: 100%;
height: 10px;
top: 50%;
left: 0;
transform: translateY(-50%);
}</p>
<p>.cross::after {
width: 10px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
</style></p>
</head>
<body>
<div class="cross"></div>
</body>
</html>
<p>本文将详细介绍如何使用HTML和CSS创建十字架形状，并通过flex布局和伪元素实现响应式效果，使十字架始终保持在浏览器视窗的中间位置。</p>
<p>首先，创建一个HTML文件，并添加以下代码：</p>
<p>在上述代码中，我们使用了flex布局来实现居中对齐。通过设置<code>align-items: center;</code>和<code>justify-content: center;</code>，使得<code>.cross</code>元素在垂直和水平方向都居中对齐。</p>
<p><code>.cross</code>类设置了宽度和高度，并使用<code>position: relative;</code>来相对于其父元素进行定位。</p>
<p><code>.cross::before</code>和<code>.cross::after</code>使用<code>::before</code>和<code>::after</code>伪元素来创建十字架的两个部分。通过设置<code>position: absolute;</code>和<code>top</code>、<code>left</code>、<code>right</code>、<code>bottom</code>来定位。</p>
<p>最后，我们将<code>.cross::before</code>设置为横向铺满宽度的线条，<code>.cross::after</code>设置为纵向铺满高度的线条。通过<code>transform</code>来调整位置。</p>
<p>保存文件并在浏览器中打开，就可以看到居中显示的十字架形状了。无论调整浏览器视窗的大小，十字架都会保持在屏幕中间位置。</p>