html - 我的 css 在不同的屏幕上是不同的 - 不能居中 div

Question

你好，我正在制作一个网站，但我无法将我的 div 置于我的主计算机屏幕的中心，而不会在我较小的笔记本电脑上造成困惑。我正在使用百分比，但这似乎没有帮助我将附上 2 张不同的图片和我的 CSS。提前谢谢你。

Laptop

Pc

CSS

body {
  background-color: black;
}

.box {
  position: absolute;
  border-radius: 5%;
  width: 8%;
  height: 4%;
  margin: 5%;
  background-color: #888888;
  border-style: solid;
  border-width: medium;
  border-color: orange;
}

.Forum-Block {
  position: absolute;
  border-radius: 5%;
  left: 10%;
  top: 0%;
  width: 70%;
  height: 140%;
  margin: 5%;
  background-color: #888888;
  border-style: solid;
  border-width: medium;
  border-color: orange;
}

.Top-Bar {
  position: absolute;
  height: 30px;
  width: 60%;
  top: 8%;
  left: 10%;
}

.Back-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.FriendsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.RequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.SentRequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.SendRequestB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.PendingRequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.Back-Box:hover {
  background-color: #262626;
}

.FriendsB-Box:hover {
  background-color: #262626;
}

.RequestsB-Box:hover {
  background-color: #262626;
}

.SentRequestsB-Box:hover {
  background-color: #262626;
}

.SendRequestB-Box:hover {
  background-color: #262626;
}

.PendingRequestsB-Box:hover {
  background-color: #262626;
}

Answer 1

您需要创建一个此类型的 CSS 以区分每个示例 10 个 16 英寸笔记本电脑。

@media screen and (min-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (max-width: 901px) {
    body {
        background-color: blue;
    }
}