<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* transform用来设置元素的变形效果
可选参数:translateX() 沿X轴方向平移 正值向右移 负值向左移
translateY() 沿Y轴方向平移 正值向下移 负值向上移
translateZ() 沿Z轴方向平移
平移元素的百分比是相对于自身就算平移量的 */
.box{
position:absolute;
background-color: tomato;
left:50%;
bottom:50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="box">aaaa</div>
</body>
</html>