CSS对齐项目以适合所有屏幕

Question

我已经构建了这个简单的javascript clock 但这仅适合我的屏幕。如果我在其他屏幕上尝试，则时针不在正确的位置。我知道问题是position: absolute属性，但是还有什么其他方法可以正确设计此属性？

.clock {
  position: absolute;
  top: 15.5%;
  right: 44.8%;
  width: 135px;
  height: 135px;
  border-radius: 50%;
}

Answer 1

根据您的笔，您可以尝试以下操作：

• 将background-position: center top;添加到html

• 将justify-content: center;添加到正文

• 删除.clock上的right: 44.8%;属性
• 在.clock上调整top: 15.5%;属性，使其适合您的时钟图像（确保使用px而不是％）

希望这会有所帮助。 ：）