在多个浮动 div 之间居中 div答案

【问题标题】：Centering a div between multiple floating divs在多个浮动 div 之间居中 div
【发布时间】：2016-09-01 14:55:45
【问题描述】：

抱歉，如果这是重复的；但我找不到我要找的东西。

我有一个容器 div；其中 1 个 div 设置为向左浮动；并且可以将 1 或 2 个其他 div 设置为向右浮动。所有这些 div 都可以有不同的宽度。

我想要做的是让我居中的 div 始终在包含的 div 中居中；不考虑浮动 div。

我尝试了不同的组合，将宽度设置为自动、边距设置为自动、文本对齐到中心等，但还没有完全做到。

谁能指出我正确的方向？

编辑：jsfiddle 这里：https://jsfiddle.net/1rn9t5yk/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="text-align: center; margin:0 auto">CENTER</div>
</div>

鉴于上述情况；我想要发生的是中心 div 不移动位置，具体取决于是否有 1 个或 2 个浮动右 div。如果您删除一个并重新运行；你可以看到位置偏移

【问题讨论】：

你能把 jsfiddle.net 分享给你吗？
基本上，你不能不使用绝对定位（除非左/右项的大小相同）。尽管 div 是浮动的，但它们仍然占用空间，在将中间项目居中时必须考虑到这一点。
你想像这个picture的第二张照片一样吗？
@Romain;实际上它更多的是第一个。我希望中心 div 始终保持在包含 div 的真实中心；不管它右边有多少个 div
所以你想要第一张图片，但如果必须，浮动 div 和居中 div 可以堆叠？

标签： html css

【解决方案1】：

如果您想在包装 div 中居中 div 而不关心包装器中的其他元素，您可以使用绝对定位

https://jsfiddle.net/t6z9wgxv/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="position: absolute; left: 0; right: 0; text-align: center;">CENTER</div>
</div>

【讨论】：