CSS3中的框居中是一個非常常用的功能，特別是在前端開發中。它可以幫助我們實現網頁布局中方框元素的垂直居中和水平居中，從而更好地掌控網頁布局。

我們可以使用以下代碼來實現框的垂直居中和水平居中：

.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

上述代碼中，我們首先使用position: absolute來讓框具有絕對定位的特性。之后，我們將框的left和top分別設置為50%，這將把框放在其父元素的中心位置。

最后，我們使用transform: translate(-50%,-50%)來將框向左和向上移動，實現垂直和水平居中。

此外，我們還可以使用flexbox布局來實現框的居中。在父元素中應用display: flex和align-items:center屬性，即可實現子元素的垂直居中。水平居中可以通過使用justify-content:center屬性來實現：

.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.child {
width: 200px;
height: 200px;
background-color: #ccc;
}

上述代碼中，我們定義了一個父元素，并在其上應用了display: flex、align-items:center和justify-content:center屬性。這樣，就可以實現子元素的垂直居中和水平居中了。

總的來說，CSS3中的框居中功能十分實用，可以幫助我們輕松實現網頁布局中的框元素的垂直和水平居中效果。