20240612每日前端---------transform实现水平垂直居中
水平垂直居中
position：absolute；left：50%;right：50%;transform：translateX(-50%) translateY(-50%);
原理分析：
position：absolute；绝对定位，相对于非static父元素进行定位，脱离文档流
transform:translate(-50%,-50%); 的作用是往左和上移动自身长宽的50%。
left：50%;right：50%; 以元素本身边距相对左边，上边，移动50%。
延申例子：
单独设置left：50%;right：50%;效果如下：
加上transform:translate(-50%,-50%);
即可实现水平垂直居中。