所以我正在尝试制作一个新城市，我正在制作一个 404 页面，我想添加一个注释，说明 gif 背景在 firefox 上已损坏。但是，当我尝试添加新文本以显示在左上角时，中心的文本变得偏心。 这是css文件的代码
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
color: #4c00b0;
font-family: utcomicsans;
}
.normal {
color: #ffffff;
font-family: 'Times New Roman', serif;
display: table-cell;
}
body {
background-color: #000000;
}
body{
background-image: url(starstwinkle.gif);
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
@font-face {
font-family: utcomicsans;
src: url(comic-sans-ut.ttf);
}
这是带有和不带有注释的页面的代码和屏幕截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="my-block">
<h1>oops! nothing here!</h1><br />
<h2>dw it's probably my fault that you're here</h2>
</div>
</body>
</html>
这是带有注释的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="normal">for some reason the background doesn't work on firefox, you have to click constantly for the to animate. idk why and i can't be bothered to fix it, sowwy :(</div>
<div class="my-block">
<h1>oops! nothing here!</h1><br />
<h2>dw it's probably my fault that you're here</h2>
</div>
</body>
</html>
我尝试删除某些部分，看看它们做了什么，以及它们是否可能导致问题（我没有编写将文本居中的代码），但这没有任何作用，只是把事情弄得更加混乱。我还尝试切换到不同的居中方法，但如果没有注释，它甚至无法工作。所以是的，我有点迷路了。任何帮助将不胜感激！
您可以尝试将普通文本（您的注释）绝对定位在相对于您的父 div 的位置。
您可以使用
定位您的父div，即您的身体
position: relative;
并为普通文本提供绝对位置并带有一些边距。
position: absolute;
top: 1rem; /*based on your preference*/
left: 1rem; /*based on your preference*/
希望这对我有帮助，如果我错了，请纠正我！