只需使用Flexbox。只需将div #徽标替换为您的图像。

超文本标记语言

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

字符串

CSS

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

型

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
nav {
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}
#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

的字符串

如果链接的大小不完全相同（在真实的世界中不太可能，显然可以设置一个固定的宽度，但很麻烦），
如果两边有相同数量的链接，这就可以了（* 只要两边有足够的空间让链接有一个均匀的宽度 *）

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

个字符
如果是一个奇数，你可以在DOM中或者使用：before /：after添加空的不可见元素（我知道这很奇怪，但它很有效），这取决于需要多少额外的元素。不幸的是，这个解决方案并不完美，所以任何建议的改进都是很好的。像这样：

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.navi-list:before {
  content: "0";
  opacity: 0.1;
  display: block;
  flex: 1 0 auto;

  
  /*  dev view  */
  height: 20px;
  background: rgba(0,0,0,0.1);
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

<nav class="navi">
    <ul class="navi-list">
<!--         <li style="opacity:0.1;">empty</li> -->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</nav>

的字符串

在链接部分使用flex: 1以保持徽标居中：

nav {
  display: flex;
  align-items: center;
}

.nav-left, .nav-right {
  flex: 1;
  text-align: center;
}

个字符