左の場合、親の影響を受ける子の幅は50％に設定されます（例えば）

Question

左の絶対的なセンタリングト​​リックを試してみると、子要素に50％変換します（-50％、0）。 （ 'auto' で幅の）テーブルには、幅が親の50％に制限されている：

私が欲しいもの：

----------------------------------------- 
|          | 
|          | 
|          | 
|  -----------------------------  | 
|  |       |  | 
|  |       |  | 
|  |       |  | 
|  -----------------------------  | 
|          | 
|          | 
|          | 
----------------------------------------- 

しかし、私が得ることである：

----------------------------------------- 
|          | 
|          | 
|          | 
|   --------------------   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   --------------------   | 
|          | 
|          | 
|          | 
----------------------------------------- 

理由は、左に50％を適用すると、幅がfに縮小されますその親：

----------------------------------------- 
|          | 
|          | 
|          | 
|     --------------------| 
|     |     || 
|     |     || 
|     |     || 
|     --------------------| 
|          | 
|          | 
|          | 
----------------------------------------- 

これは、translateを使用して中央揃えされます。

これを克服し、テーブルに自動幅を設定する方法はありますか？ここ

コード：ブロック：https://jsfiddle.net/n4f9v5ro/3/

唯一の子が表示され、問題のようですか？

Answer 1

left: 50%とtranslateX(-50%)の代わりに自動余白を使用してセンタリングすることができます。

.main { 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
    margin: 30px; 
 
} 
 
.main > div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    border: 1px solid blue; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
}

<div class="main"> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td>some long text some long text some long text some long text some long text</td> 
 
     <td>something else</td> 
 
     <td>something else</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div> 
 
<div class="main"> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td>some</td> 
 
     <td>small</td> 
 
     <td>text</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>