使用transform 完全居中问题

当使用 transform 让类名为child元素完全居中并且 child 元素高度宽度不固定

   <div class="parent">
       <div class="child"></div>
     </div>

使用如下居中,可以完全居中定位使用absolute 但是 child 的宽度不会超过屏幕的一半,就会自动换行,内容会压缩.

  . parent{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }
    .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

如何解决:

可以使用 width: fit-content 但是iOS 兼容有问题,不太支持
把 absolute 换成 relateve 那么child 的宽度就能自适应超过一半的宽度