标签：idt alt 移动 splay ffffff abs src png items
html: <view class="box"></view> css: .box{ background-color: #1AAD19; color: #FFFFFF; font-size: 36rpx;
width: 200rpx;
height: 300rpx;
}
.box:before{
content: ‘A‘;
}
像这样现在什么都样式都还先不加。如下图。
现在给元素应用flex方法来居中。
.box{
...
display: flex;
align-items: center;
justify-content: center;
}
下面通过相对绝对定位来做居中：
.box{
position: relative;
}
.box:after{
...
position: absolute;
top: 50%;
left: 50%;
}
可以看到Ａ并没有居中。
因为当使用：top: 50%;left: 50%;， 是以元素的左上角为原点，故不会居中。所以这里要再加一句 “ transform:translate(-50%,-50%) " 就可以得到居中。
作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，来使其居中。
标签：idt alt 移动 splay ffffff abs src png items
原文地址：https://www.cnblogs.com/Bluelingling/p/10220591.html
