<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>位移</title> <style> /* 2D变换transform 位移translate(水平,垂直): 1.是根据自身的位置进行水平和垂直的站位移动 2.水平：正值向右,负值向左;垂直：正值向下,负值向上 3.不影响周围元素 4.translateX() 和 translateY() 是单独控制横向和纵向 5.可以实现元素水平垂直居中 */ * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; } .box1 { background-color: skyblue; transform: translate(100px, 0px); } .box2 { position: absolute; top: 50%; left: 50%; background-color: orange; transform: translate(-50%,-50%); } .box3 { background-color: pink; transform: translateX(1000px); } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </body> </html>