首先，大家需要了解一下什么是“盒模型”。在CSS中，每个元素都被看作是一个矩形的盒子。这个盒子由四个部分构成：内容区、内边距、边框和外边距。而“盒模型”的分类就是基于这四个部分的。
现在，如果大家想要实现一个宽度为100%的居中，大家需要知道的是，这个盒子（也就是元素）的宽度是包括内边距和边框的。也就是说，如果大家想要实现宽度为100%的居中，大家需要把内边距和边框的宽度算在内。
.container {
width: 100%;
max-width: 960px; /*假设大家要最大宽度是960px*/
margin: 0 auto;
box-sizing: border-box; /*这个属性是关键*/
}上面的代码中，大家使用了一个很重要的属性：box-sizing。这个属性有两个值：content-box和border-box。默认值是content-box，也就是说，元素的宽度只包括内容区的宽度。而大家需要更改成border-box，使得元素的宽度包括了内边距和边框的宽度。
使用一个宽度为100%的元素实现居中有很多场景，比如大家想要实现一个全屏幕显示的背景图。
html,
body {
height: 100%;
}
.bg {
background-image: url('background.jpg');
background-size: cover;
height: 100%;
box-sizing: border-box;
padding: 50px;
margin: 0 auto;
}上面的代码中，大家首先设置了html和body的高度为100%。然后大家使用了一个类名为“bg”的元素来实现全屏幕的背景图。同样地，大家使用了box-sizing属性来让元素的宽度计算包含内边距和边框。padding的设置可以让背景图与页面边缘留出一些空白，margin:auto可以让元素水平居中。
总之，使用宽度为100%的元素实现居中是很方便的。关键在于要记得设置box-sizing属性。