正解だけさっさとくれい

こんなかんじでいけるはずです。

.parents {
  position: relative;
  width: 100px;
  height: 100px;
  child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
}

解説

childのabsolute & top:left50%の時点で親の真ん中に左端がくるようになる。 そしてそれを50%(この50%は子供のやつ。子供の全文の長さの真ん中が50%)分動かすことで 文の真ん中がabslute:top:left50%の位置に来る。 って感じ。

x軸もわすれないようにする。