Question

问题是我的布局在缩小或缩小时没有中断，它只是向左包裹，因此在最小的缩放时，您将在浏览器屏幕的最左侧部分看到我的布局。虽然我希望我的布局尺寸减小但不会向左浮动。我希望它能在每次变焦时保持完美居中。

我该怎么做？

<body class="body">
    <div class="wrapper">/</div>
    <script src="js/jquery.js" type="text/javascript"></script>
</body>

 .body {
     position: absolue;
     top: 0%;
     margin: 0 auto;
     width: 1366px;
     height: 768px;
     background: white;
 }
 .wrapper {
     position: absolute;
     left: 20%;
     right: 20%;
     margin: 0 auto;
     min-height: 100%;
     background: black;
 }

Answer 1

在你的身体标签上，放text-align: center;，这样即使在缩放时也应保持一切为中心。

Answer 2

我不确定你的代码有什么用处。

以下是您在jsFiddle中提供的代码示例，该代码似乎在任何缩放级别都处于中心位置。

Working Demo in Fiddle

传统上，以div为中心的技巧是margin: 0 auto;

但你这样做，所以我觉得你没事。

你有没有其他干扰的格式？你能提供更多信息吗？

Answer 3

你可以试试这个：

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

 body {
     text-align: center;
 }

#page-wrap {
  text-align: left;
  width: 800px;
  margin: 0 auto;
}

放大和缩小时如何保持包装器保持居中？

3 个答案:

Working Demo in Fiddle

你可以试试这个：