Divs 'left / center / right' - 如何在没有 'width' 的情况下完美居中？

Question

这个问题基于这个答案：

我阅读了很多关于这个主题的帖子，在我看来这是最好的答案，因为我想避免设置 width。
但是中间的内容不是很好居中，而是基于左右两边的内容。
证明： https://jsfiddle.net/p7kfuont/（'b'不在第一行居中）

有没有办法在不设置 widths 的情况下改进此代码（inline-block 和 float）？

Answer 1

这是您要实现的目标吗？

.container {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}
.container > div {
    display: table-cell;
    border: 1px solid red;
}

<div class="container">
    <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>
<div class="container">
    <div class="left">a</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>

Answer 2

如果您希望 b 严格位于中间，您可以添加：

    .container {
      position: relative;
    }

    .container .center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%); /*add this if you want the element centered*/
      -ms-transform: translateX(-50%); /* IE 9 */
      -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    }

transform: translateX(-50%) 会将您的元素的中心设置在中心，而如果没有它，您的元素的左边缘将位于中心。

jsFiddle

Divs 'left / center / right' - 如何在没有 'width' 的情况下完美居中？

Divs 'left / center / right' - how to perfectly center without 'width'?

css

center

css-float