css - 使用 flexbox(...或不使用 flexbox)的高级居中

Question

看看这个伪代码: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

Answer 1

这一小段代码将使它完美居中:

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

此处演示:http://jsbin.com/quwaqowa/1/edit