在CSS中，盒子的布局一直都是一個(gè)比較重要的概念，而盒子移動(dòng)則是在這個(gè)基礎(chǔ)之上的一種常見的操作。如果我們想讓盒子向上移動(dòng)，該如何實(shí)現(xiàn)呢？下面我們來介紹一下。

.box{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background-color: #f00;
}

上面的代碼中，假設(shè)我們已經(jīng)定義了一個(gè) class 為 “box” 的盒子，并給它定位（position: absolute;)，并讓它居中（left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;）。現(xiàn)在如果我們希望它往上移動(dòng)，只需要修改 margin-top 的值即可。

.box{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -150px; /* 盒子上移50px */
background-color: #f00;
}

如上代碼所示，把 margin-top 的值從 -100px 修改為 -150px，即可讓盒子在垂直方向上上移50px。

另外，在 CSS3 中，還提供了 transform 屬性，可以用來控制盒子的旋轉(zhuǎn)、縮放、移動(dòng)等操作，也是非常實(shí)用的一種實(shí)現(xiàn)方式，可以根據(jù)實(shí)際場(chǎng)景來選擇合適的方案。