CSS3 中的 box 居中功能是許多前端開發(fā)人員經(jīng)常用到的功能。在 CSS3 中，有多種方法可以實現(xiàn) box 的居中。下面分別介紹這些方法。

/* 水平居中 */
.box {
width: 200px;
height: 100px;
background-color: #666;
margin: 0 auto;
}
/* 垂直居中 */
.box {
width: 200px;
height: 100px;
background-color: #666;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 水平垂直居中 */
.box {
width: 200px;
height: 100px;
background-color: #666;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

以上代碼分別是實現(xiàn)水平居中、垂直居中和水平垂直居中的代碼。水平居中的代碼使用了margin: 0 auto;，這個代碼的意思是將元素的左右外邊距分別設為自動，從而使元素在水平方向上居中。

垂直居中的代碼使用了絕對定位和 CSS3 的 transform 屬性。將元素的 top 屬性和 left 屬性都設為 50%，即讓元素距離頂部和左邊分別為頁面高度和寬度的一半。然后使用transform: translate(-50%, -50%);將元素向左移動寬度的一半，向上移動高度的一半，從而使元素在垂直方向上居中。

水平垂直居中的代碼使用了絕對定位、上下左右邊距都設為 0，以及 margin 屬性設為 auto。這種方法和上面的垂直居中非常類似，但是多了一個 margin 屬性。由于上下左右邊距都為 0，所以元素會被固定在頁面左上角。然后再使用 margin 屬性的 auto 值，讓瀏覽器自動計算邊距，從而使元素水平和垂直方向上都居中。