html - 使用 css 的全屏网页布局问题

Question

我有一个全屏网页布局，有两个“浮动”文本框，它们大约位于屏幕中间。这是盒子的css（除了页面上的垂直方向外，它们是相同的）：

#home-box-1
{
background-image:url('../images/px_trans_brown.png');
margin-top:16%;
margin-left:25%;
width:850px;
height:176px;
}

在 1920 x 1080 的全屏下，它看起来非常好。盒子的尺寸设置为最小尺寸（1024 x 768），每边都有空间。但是，当屏幕调整大小时，左侧有很多死区，并且框会离开右侧的屏幕。

我不是 css 专家，但我的印象是“margin-left:25%”会与屏幕边缘保持 25% 的边距，无论浏览器窗口大小如何。

任何人都知道我该如何解决这个问题？

Answer 1

这将使盒子保持居中，并在它们周围保持较小的边距。

body {
  margin-left: 75px;
  margin-right: 75px;
}
#home-box-1 {
  background: #aaa;
  margin-top:16%;
  margin-left:auto;
  margin-right: auto;
  max-width:850px;
  height:176px;
}