Question

我正在看这个漂亮的网页设计，注意盒子在屏幕中间是如何完美居中的，我已经查看了页面的源代码，但这对我来说没有多大意义。

（Web site Link to view full example, click here）

我能真正弄清楚的是他们正在使用，下面的代码位于样式表的顶部。

*, *:before, *:after {
    box-sizing: border-box;
}

简而言之，我想知道在屏幕中心的图像上将盒子居中的最简单，最有效的方法是什么。

Answer 1

应用您想要居中的margin: 0 auto;。

虽然您还需要确保该项目可以居中。为此，请将其宽度校正为小于HTML <body>的全宽。

正如您在此图片中所看到的，真正的魔力正在通过以下代码完成：

#preview-container-id {
  margin: 0 auto;
  width: 70%;
}

有了这个，他们执行了我的答案中提到的两个步骤。

如果您取消激活这两个属性，您会注意到该框一直向左移动。

正如 Luke Robertson 所提到的，有不同的方法可以解决这个问题。我的解决方案是针对块级项目，但是如果你有一个内联级别的项目，那么这个解决方案根本不起作用。

回答评论问题

box-sizing: border-box总结了边距和填充设置的所有累积宽度和高度，以及为元素定义的大小。

注意突出显示的元素的大小，没有左边填充并且边框处于活动状态：

现在，检查左侧填充激活的宽度：

你看到有什么变化吗？

现在，让我们取消激活border-box并保留填充：

现在看起来很丑陋，而且border-box阻止了

正如您在this CSS-Tricks帖子中引用的那样：

这通常被称为＆＃34;通用盒子大小＆＃34;，它是一种很好的工作方式！您设置的（文字）宽度是您获得的宽度，无需执行心算和管理来自多个属性的宽度的复杂性。

不，您不需要在<body>或<html>标记上设置任何额外的CSS，因为它们已经附带了必需的属性以允许您居置块级项目：）

Answer 2

HTML：

<div class="center-me">
 //div content
</div>

CSS：

.center-me {
   margin: 0 auto;
   width: 80%;
}

有不同的方法，这取决于你的父元素是否是一个块

Answer 3

您还可以使用Flexbox水平和垂直居中：

window.onload = (function() {
  var container = document.getElementById('container');
  container.style.width = window.innerWidth + 'px';
  container.style.height = window.innerHeight + 'px';
}); // end window.onload

body {
  background-color: ivory;
  margin: 0;
  padding: 0;
}
#container {
  display: flex;
}
#box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background: skyblue;
  margin: auto;
}

<div id='container'>
  <span id='box'>Box centered horizontally and vertically.</span>
</div>

Answer 4

他们在身体开始后取了一个div

        <div id="preview-container-id">

然后他们将CSS应用于他们

查看这些内容，您将了解您提供的链接

Image 1

Image 2

Answer 5

HTML：

.parent_element{
    float:left;width:100%;text-align:center;
}
.child_element{
    float:none;display:block;margin:0 auto;width:80%;
}

CSS：

{{1}}

CSS / HTML中心框

5 个答案: