添加左上角提示后Neocities 404页面居中文本偏移问题求助

我在制作Neocities的404页面时，需要添加一段提示文本说明Firefox浏览器下背景GIF动画异常（需持续点击才能播放），但添加左上角的.normal类文本后，原本通过table/table-cell方式居中的.my-block文本出现偏移，调整原有代码、更换居中方式都没解决，相关代码如下：

原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);
        }

无提示文本的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="my-block">
       <h1>oops! nothing here!</h1><br />
       <h2>dw it's probably my fault that you're here</h2>
    </div>
    
  </body>
</html>

添加提示文本后的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>

把body设为display: table后，给.normal也加上display: table-cell，会让两个div变成表格的两个单元格，并排占据页面宽度，导致.my-block不再是唯一的单元格、无法占满整个页面宽度，原本的text-align: center和垂直居中自然失效，出现偏移。

方案1：用绝对定位固定提示文本，保留原有居中逻辑 #

修改CSS中.normal的样式，用绝对定位把它固定在左上角，不干扰表格布局：

.normal {
  color: #ffffff;
  font-family: 'Times New Roman', serif;
  position: absolute;
  top: 10px;
  left: 10px;
  /* 可选：加半透明背景让文本更清晰 */
  background-color: rgba(0,0,0,0.7);
  padding: 5px 10px;
}

方案2：改用Flex布局重构，更简洁稳定 #

放弃table布局，用Flex实现页面居中，同时定位提示文本：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: #000000;
  background-image: url(starstwinkle.gif);
  background-size: cover;
  /* 用Flex实现整体居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 让绝对定位的提示文本基于body定位 */
}

.my-block {
  text-align: center;
  color: #4c00b0;
  font-family: utcomicsans;
}

.normal {
  color: #ffffff;
  font-family: 'Times New Roman', serif;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0,0,0,0.7);
  padding: 5px 10px;
}

@font-face {
  font-family: utcomicsans;
  src: url(comic-sans-ut.ttf);
}

HTML不需要修改，保持添加提示文本后的结构即可。

内容的提问来源于stack exchange，提问作者Ender