在CSS中居中盒子是一項很基本的技能，更確切地說，是居中內部元素。讓我們看一下如何使用CSS使盒子垂直居中和水平居中！

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

首先，我們將盒子的位置設置為絕對定位（absolute position），因為在絕對定位下，元素被脫離文檔流，可以在頁面上任意移動。接下來，我們將盒子的頂部位置設置為屏幕高度的一半，這將使元素的頂部與瀏覽器窗口的中心對齊。

然后，我們將盒子的左側設置為屏幕寬度的一半。這樣，在絕對定位和頂部偏移量的作用下，元素的左邊緣將水平對齊瀏覽器窗口的中央。

最后，我們使用transform屬性和translate函數將元素向上和向左移動它的高度和寬度的一半，使其在屏幕上垂直和水平居中。

這就是在CSS中讓盒子垂直居中和水平居中的方法！