使用 flexbox 的高级居中（...或没有 flexbox）答案

【问题标题】：Advanced centering with flexbox (...or without flexbox)使用 flexbox 的高级居中（...或没有 flexbox）
【发布时间】：2014-09-05 09:36:48
【问题描述】：

看看这个虚拟代码：http://jsbin.com/nabis/1/edit?html,css,output

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

这可以用 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>

这是 CSS：

.nav {
  display: flex; justify-content:center;align-items:center;list-style:none none;  margin:0; padding:0;
}

.nav__item {
  padding: 0 10px;

}

.nav__item--home a {
   display:block;
   width: 75px; 
  height:75px;
  background:url(http://dummyimage.com/75x75/000/fff&text=home) no-repeat 0 0;

}

这是我想要实现的示例：example image

【问题讨论】：

home-item 有固定宽度吗？
请在问题中发布代码的重要部分，不要只提供链接。
你试过用弹性盒子吗？还是在等待现成的实施？
- @web-tiki: home-item 确实有固定宽度
@Synchro 我认为一个工作示例将有助于解释这个问题。现在添加了 HTML/CSS 代码

标签： css flexbox

【解决方案1】：

这一点代码将完美地居中：

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

在这里演示：http://jsbin.com/quwaqowa/1/edit

【讨论】：

谢谢，但这不是我要找的。我希望主页项在其他导航项的流中，但边距均匀。

【解决方案2】：

给nav怎么样：width: 100%;

然后到每个元素 20% 和 text-align: center;

有 5 个元素，所以一切正常。

【讨论】：

【解决方案3】：

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

要获得您正在寻找的结果，您只需为nav__item 提供一个足够大的值的初始宽度以包含very long navitem。

如果您在示例中添加以下内容，nav__item--home 将居中。

.nav__item { padding: 0 10px; width: 100px; }

您正在指示nav__items尝试成为100px，但如果它们不能，则在它们之间平均分配任何水平空间（正或负） .

有相等数量的nav__items 在nav__item--home 的两侧占用相等数量的空间。由此我们可以假设中间项两侧占用的空间相同，因此推断nav__item--home（中间项）必须在中心。

【讨论】：