JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <a href="#">short</a>
  </li>
  <li>
    <a href="#">want center</a>
  </li>
  <li>
    <a href="#">loooooooooooooooooong</a>
  </li>
</ul>

CSS

ul {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: purple;
}
li {
  display: inline-flex;
  justify-content: center;
  flex: 1;
  background-color: red;
  border: 2px solid blue;
  list-style: none;
}
li:first-child > a {
  margin-right: auto;
}
li:last-child > a {
  margin-left: auto;
}
* {
  box-sizing: border-box;
  padding: 0;
}