为什么带变换的居中平移和左50%居中(相对于父对象的位置)很完美,而不是右50%居中
工作示例:
span[class^=“icon”]{
位置:绝对位置;
最高:50%;
左:50%;
转换:翻译(-50%,-50%);
}
不居中的示例:
span[class^=“icon”]{
位置:绝对位置;
最高:50%;
右:50%;
转换:翻译(-50%,-50%);
}
因为translateX(-50%)将某物移回左侧50%(因为-负值),这意味着它与左侧:50%成对以使某个对象居中
如果你想使用right:50%然后将其与translateX(50%)一起使用,以居中
*{margin:0;}
跨度{
位置:绝对位置;
顶部:50%;右侧:50%;
转换:翻译(50%,-50%);
背景:黑色;
颜色:白色;
}
身体:之后,身体:之前{
内容:'';
位置:绝对位置;
背景:红色;
}
正文:之后{
最高:50%;
左:0;右:0;
高度:1px;
}
身体:以前{
左:50%;
顶部:0;底部:0;
宽度:1px;
}
<;span>;中心me</span>