如何让子元素在父元素中居中

<view class="father">

<view class="son">

</view>

</view>

.father{
width: 600rpx;
height: 600rpx;
background-color: orangered;
position: relative;
}
.son{
width: 300rpx;
height: 200rpx;
background-color: lawngreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100rpx;
margin-left: -150rpx;
}