position left50% transition：translate(-50%) 未指定元素的寬度 內容擠下問題

沒有指定長度width的情況

使用position:absolute left:50% transform:translateX(-50%)

bug:當文字寬度超過屏幕一般以上的時候，文字會被擠下。

原始代碼：

    <div class="tips">讓身邊的 “Ta” 們更了解你的貨車生活</div>
    .tips{
      position: absolute;
      bottom: 20.4rem;
      left:50%;
      transform: translateX(-50%);
      text-align: center;
      color: #FFC962;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #FFC962;
      z-index: 2;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
    } 

使用flex后

使用flex positon可以和flex連用

    <div class="tips"><div>讓身邊的 “Ta” 們更了解你的貨車生活</div></div>
    .tips{
      position: absolute;
      bottom: 20.4rem;
      width: 100%;
      color: #FFC962;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #FFC962;
      z-index: 2;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
    }

原因：沒有設置寬度的div在position:absolute,left:50%自動設置了自己的寬度為父寬度的一半。所以上邊內容超過父級寬度的一半的時候內容擠下，而內容小於父級寬度的一半的時候，正常顯示。

當設置了元素的寬度，無論是否超過父級的一半都正常顯示

補充： 

1.一個已設置寬高的塊狀元素設置position:absolute后會保持他原來寬高

2.一個內聯元素設置position:absolute會自動轉為一個塊狀元素

3.一個沒有設置寬高的塊狀元素position:absolute,top:0;left:0,默認寬度是父的寬度

4.一個內聯元素position:absolute,top:0;left:0,它默認寬度是父的寬度.

5.一個元素position:absolute,left:50%

沒有設置寬度的div在position:absolute,left:50%自動設置了自己的寬度為父寬度的一半.

當有寬度的div設置了position:absolute,left:50%以后,它的寬度正常顯示.