使用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%);
}

如何解决:

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