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%，来使其居中。
css 元素居中
原文地址：https://www.cnblogs.com/Bluelingling/p/10220591.html