transform: translate(50%, 50%)
为什么能够使一个元素水平垂直居中？
人生最曼妙的风景，竟是内心的淡定与从容！
这样写并不能使一个元素水平垂直居中，只能使元素在当前位置分别往x轴和y轴正向平移自身宽度的一半距离。
之前答过一个题，楼主可以看一下，也许有一些帮助。
translate
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--author:Vace_Vlm(ocdo@qq.com),create:2016年5月21日 下午10:45--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>title</title> <style> *{ padding: 0;margin: 0; } html,body{ width:100%; height:100%; } .box{ position:relative; top:50%; left:50%; width:200px; height:200px; background:red; transform:translate(-50%,-50%); transform-origin:50% 50%; } </style> </head> <body> <p class="box"></p> </body> </html>
这样写并不能直接居中，可以定位，然后left:50%; 这个时候定位原点是父层的定位元素，然后使用translateX(-50%)；这时候是相对于这个元素本身向左移动一半，最终效果刚好是居中的。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这样写并不能使一个元素水平垂直居中，只能使元素在当前位置分别往x轴和y轴正向平移自身宽度的一半距离。
之前答过一个题，楼主可以看一下，也许有一些帮助。
translate
这样写并不能直接居中，可以定位，然后left:50%; 这个时候定位原点是父层的定位元素，然后使用translateX(-50%)；这时候是相对于这个元素本身向左移动一半，最终效果刚好是居中的。