当flexbox不可用时，居中菜单项回退

<ul class="menu">
  <li class="menu-item">菜单项1</li>
  <li class="menu-item">菜单项2</li>
  <li class="menu-item">菜单项3</li>
</ul>

.menu {
  text-align: center;
}

.menu-item {
  display: inline-block;
}

<ul class="menu">
  <li class="menu-item">菜单项1</li>
  <li class="menu-item">菜单项2</li>
  <li class="menu-item">菜单项3</li>
</ul>

.menu {
  position: relative;
}

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