我看着这个漂亮的网页设计，请注意盒子是如何完美地位于屏幕中间的，我已经查看了页面的源代码，但对我来说没有多大意义。
(Web site Link to view full example, click here)
我唯一能确定的是他们正在使用样式表顶部的以下代码。
*, *:before, *:after {
box-sizing: border-box;
}
简而言之，我想知道什么是最简单和最有效的方法来使一个盒子像屏幕中央的图像一样居中。
最佳答案
应用您想要居中的框 margin: 0 auto; .
尽管您还需要确保该元素可以居中。为此，将其宽度更正为小于 HTML 的全宽 <body> .
正如您在这张图片中看到的，真正的魔法是由以下代码完成的:
#preview-container-id {
margin: 0 auto;
width: 70%;
}
有了这个，他们执行了我回答中提到的两个步骤。
如果您停用这两个属性，您会注意到该框一直向左移动。
正如 Luke Robertson 提到的，有不同的方法来解决这个问题。我的解决方案适用于 block 级元素，但如果您有内联级元素，则此解决方案根本不起作用。
评论问题的回答:
box-sizing: border-box将边距和填充设置的所有累积宽度和高度与为元素定义的大小相加。
注意没有左填充且边框框处于事件状态的突出显示元素的大小:
现在，检查左侧填充激活时的宽度:
有什么变化吗？
现在，让我们取消激活边框并保留填充:
现在这看起来很难看，而这正是border-box防止
正如您在 this 的引述中看到的那样CSS 技巧帖子:
This is often called "universal box-sizing", and it's a good way to work! The (literal) width you set is the width you get, without having to perform mental math and manage the complexity that comes from widths that come from multiple properties.
不，您不需要在 <body> 上设置任何额外的 CSS或 <html>标签，因为它们已经带有允许您居中 block 级元素所需的属性:)
关于CSS/HTML 中心框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39887362/