自定义定位图像在不同的屏幕大小上变化-HTML/CSS

我在我的笔记本电脑上创建了一个网站，我以某种方式定位了图像，但当我在我的电脑上查看它时，图像仍然保持在形状上，只是不在页面右侧的中央

以下是HTML：

对于
#puzzle
，有相当多的无效CSS。最重要的是，你没有提供足够的数据让我实际测试这个。然而，我可以给你一个例子（我个人最喜欢的）一种常见的方法，垂直、水平或同时垂直、水平地将
块
居中

要使此方法起作用，我们需要设置固定的
宽度
和（取决于是否垂直居中）
高度
。诀窍是将
块
元素的
左
和
顶
设置为屏幕的
50%
，然后使用负的
边距
值将其拉回原位，减半我们知道元素的固定大小


#居中{
背景色：#000；
高度：75px；
左：0px；
位置：绝对位置；
顶部：0px；
宽度：75px；
}
#居中>跨距{
显示：块；
高度：25px；
位置：绝对位置；
宽度：25px；
}
#水平居中{左侧：50%；左侧边距：-37px；}
#居中。垂直{页边距顶部：-37px；顶部：50%；}
#一个{背景色：#f00；左：0px；顶：0px；}
#两个{背景色：#0f0；左：25px；顶：0px；}
#三个{背景色：#00f；左：50px；顶：0px；}
#四个{背景色：#ff0；左：0px；顶：25px；}
#五{背景色：#f0f；左：25px；顶：25px；}
#六{背景色：#0ff；左：50px；顶：25px；}
#七{背景色：#333；左：0px；顶：50px；}
#八{背景色：#777；左：25px；顶：50px；}
#九{背景色：#aaa；左：50px；顶：50px；}