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

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

首先，我們將盒子的位置設(shè)置為絕對(duì)定位（absolute position），因?yàn)樵诮^對(duì)定位下，元素被脫離文檔流，可以在頁面上任意移動(dòng)。接下來，我們將盒子的頂部位置設(shè)置為屏幕高度的一半，這將使元素的頂部與瀏覽器窗口的中心對(duì)齊。

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

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

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