css 元素居中

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%，来使其居中。