css中盒子往上移动 |css 增加页面亮度

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

上面的代码中，假设大家已经定义了一个 class 为 “box” 的盒子，并给它定位（position: absolute;)，并让它居中（left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;）。现在如果大家希望它往上移动，只需要修改 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 属性，可以用来控制盒子的旋转、缩放、移动等操作，也是非常实用的一种实现方式，可以根据实际场景来选择合适的方案。