Css 使用flexbox进行高级定心（…或不使用flexbox）

看看这个伪代码：

我想要的是“主页”-项目位于页面的中心

这可以用Flexbox完成吗？或者，还有什么其他CSS（非flexbox）解决方案可以让我达到这个目标

这是HTML：

<ul class="nav">
  <li class="nav__item"><a href="#">very long navitem 1</a></li>
  <li class="nav__item"><a href="#">very long navitem 2</a></li>
  <li class="nav__item nav__item--home"><a href="#"></a></li>
  <li class="nav__item"><a href="#">navitem 3</a></li>
  <li class="nav__item"><a href="#">navitem 4</a></li>
</ul>

---

下面是我想要实现的一个示例：

这一小段代码将使其完美居中：

.nav__item--home {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

---

这里演示：

给导航：宽度：100%怎么样

然后到每个元素20%和文本对齐：居中

---

共有5个元素，因此一切都可以正常工作。

我知道这是一个非常老的问题，您现在可能已经找到了解决方案，因为您与示例中的代码非常接近

为了获得您所寻找的结果，您只需为

nav\u项

提供一个足够大的初始宽度，以包含一个

非常长的navitem

如果将以下内容添加到示例中，

nav\u项--home

将居中

.nav\u项目{
填充：0 10px；
宽度：100px；
}

您正在指示

导航项目

尝试成为

100px

，但如果它们不能成为，则在它们之间平均分配任何水平空间（正或负）

---

有等量的

导航项目

占据了

导航项目--home

两侧等量的空间。由此，我们可以假设中间项两边占用的空间是相同的，因此推断

导航项--home

（作为中间项）必须在中间。

主项是否有固定宽度？请在问题中张贴代码的重要部分，不要只是提供一个链接。你有没有试过用flexbox？或者您正在等待一个现成的实现？-@web tiki:home item确实有一个固定的width@Synchro我认为一个有效的例子将有助于解释这个问题。现在添加了HTML/CSS代码谢谢，但这不是我想要的。我希望在其他导航项的流中包含主项，但要具有均匀的边距。

.nav__item--home {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}