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

Question

我有一个全屏网页布局，有两个“ float ”文本框，它们大约位于屏幕中间。这是框的 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)，每侧都有空间。但是，当调整屏幕大小时，左侧有很多死 Angular ，右侧的框超出了屏幕。

我不是 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;
}