Javascript 如何水平居中放置内容，而不在侧面重叠项目

我正在尝试创建一个类似于iOS的UINavigationBar的视图布局：

UINavigationBar的标题位于屏幕中央，可选导航项（按钮）位于两侧。如果标题太宽，无法放在中间，则会将其推到一边，以避免与导航项目重叠

在没有JavaScript的情况下，仅CSS就可以实现这样的布局吗

这是我为实现这种布局所做的一些尝试

在上面的屏幕截图中，通过浮动两侧的红色和蓝色按钮，并将黄色div的左右边距设置为

auto

，可以实现布局。上面的第二行正是我想要的，但不幸的是，我必须在黄色div上设置一个显式的宽度

我也尝试过flexbox，但它不允许我将黄色div相对于容器居中

---

如果在这种情况下无法避免使用JavaScript，那么最好的方法是什么（与每个浏览器最兼容）？

将左/右列放置在绝对位置

.left,
.right {
  position: absolute;
}
.left {
  left: 0;
}

.right {
  right: 0;
}
.center {
  padding: 0 200px; // Add indents so columns don't overlap its content.
}

.row{
边框：1px纯黑；
位置：相对位置；
利润率：20px0；
填充：5px0；
}
左边
.对{
位置：绝对位置；
}
.左{
背景色：红色；
宽度：200px；
左：0；
}
.对{
背景色：青色；
右：0；
}
.中心{
保证金：0自动；
背景颜色：黄色；
文本对齐：居中；
空白：nowrap；
填充：0 200px；
}
.固定{
宽度：130px；
}
.零{
宽度：0px；
}

左边
正确的
居中
左边
正确的
居中
左边
正确的
居中
<代码> > p>您可以使用<代码>位置：<代码>位置：绝对< <代码> >左/右位置> <代码>中心/<代码> div。

另外，为
位置：相对于
左侧
和
右侧
提供更高的
z索引
，使其显示在
中心上方

参考代码：


.row{
边框：1px纯黑；
利润率：20px0；
填充：5px0；
位置：相对位置；
高度：18px；
}
.左{
浮动：左；
背景色：红色；
宽度：200px；
位置：相对位置；
z指数：2；
}
.对{
浮动：对；
背景色：青色；
位置：相对位置；
z指数：2；
}
.中心{
保证金：0自动；
背景颜色：黄色；
文本对齐：居中；
空白：nowrap；
}
.绝对的{
位置：绝对位置；
左：0；
右：0；
}
.零{
宽度：0px；
}
@仅介质屏幕和（最大宽度：565px）{
.绝对的{
左：200px；
左侧填充：20px；
文本对齐：左对齐；
}
}

左边
正确的
居中
左边
正确的
居中
左边
正确的
居中
将浮动更改为绝对定位，
以“行”为“锚”

你看过css显示：flex属性吗？但是200px是硬编码的。我不知道左右div的大小，我可能在左边有10个按钮，在右边只有1个按钮，按钮可能会动态变化。@Decademon在这种情况下，您需要一些JavaScript解决方案。当有人在没有提供解释的情况下否决了一个完美的答案时，这是对在这里帮忙的人的不尊重。我没有投反对票，但我不希望中间的div重叠在左边或右边，就像UINavigationBar中的标题没有重叠设置按钮一样。你可以使用
媒体查询
来实现你想在这里做的事情。指定屏幕宽度后，您可以对齐中心分区。检查更新的代码。
.row{
 position: relative
}

.left,
.right {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}