CSS中實現(xiàn)居中的方法有很多種，但在這里我想要討論的是如何實現(xiàn)寬度為100%的居中。

首先，我們需要了解一下什么是“盒模型”。在CSS中，每個元素都被看作是一個矩形的盒子。這個盒子由四個部分構(gòu)成：內(nèi)容區(qū)、內(nèi)邊距、邊框和外邊距。而“盒模型”的分類就是基于這四個部分的。

現(xiàn)在，如果我們想要實現(xiàn)一個寬度為100%的居中，我們需要知道的是，這個盒子（也就是元素）的寬度是包括內(nèi)邊距和邊框的。也就是說，如果我們想要實現(xiàn)寬度為100%的居中，我們需要把內(nèi)邊距和邊框的寬度算在內(nèi)。

.container {
width: 100%;
max-width: 960px; /*假設(shè)我們要最大寬度是960px*/
margin: 0 auto;
box-sizing: border-box; /*這個屬性是關(guān)鍵*/
}

上面的代碼中，我們使用了一個很重要的屬性：box-sizing。這個屬性有兩個值：content-box和border-box。默認(rèn)值是content-box，也就是說，元素的寬度只包括內(nèi)容區(qū)的寬度。而我們需要更改成border-box，使得元素的寬度包括了內(nèi)邊距和邊框的寬度。

使用一個寬度為100%的元素實現(xiàn)居中有很多場景，比如我們想要實現(xiàn)一個全屏幕顯示的背景圖。

html,
body {
height: 100%;
}
.bg {
background-image: url('background.jpg');
background-size: cover;
height: 100%;
box-sizing: border-box;
padding: 50px;
margin: 0 auto;
}

上面的代碼中，我們首先設(shè)置了html和body的高度為100%。然后我們使用了一個類名為“bg”的元素來實現(xiàn)全屏幕的背景圖。同樣地，我們使用了box-sizing屬性來讓元素的寬度計算包含內(nèi)邊距和邊框。padding的設(shè)置可以讓背景圖與頁面邊緣留出一些空白，margin:auto可以讓元素水平居中。

總之，使用寬度為100%的元素實現(xiàn)居中是很方便的。關(guān)鍵在于要記得設(shè)置box-sizing屬性。