Question

如果我尝试左边的旧绝对居中技巧：50％并且变换：翻译（-50％，0）对作为表格的子元素（具有“自动”宽度），宽度限制为50％父母：

我想要的是什么：

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

但我得到的是：

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

原因是，当应用剩余50％时，宽度减小以适合父母：

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

然后使用翻译对中。

有什么方法可以解决这个问题并保持自动宽度设置在桌面上？

此处代码：https://jsfiddle.net/n4f9v5ro/3/

当孩子显示时，似乎只是一个问题：阻止？

Answer 1

您可以使用自动边距代替left: 50%和translateX(-50%)来居中。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

左边受父母影响的孩子的宽度设置为50％（例如）

1 个答案: