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%;}
可以看到A并没有居中。
因为当使用:top: 50%;left: 50%;, 是以元素的左上角为原点,故不会居中。所以这里要再加一句 “ transform:translate(-50%,-50%) " 就可以得到居中。
作用是,往上(x轴),左(y轴)移动自身长宽的 50%,来使其居中。