文字仅在包裹时居中

Question

我知道了：

nav {
  position: fixed;
  display: flex;
  background-color: grey;
}

.button {
  display: flex;
  align-items: center;
  align-content: center;
  color: white;
  text-align: center;
  padding: 0.2rem;
  font-size: 1rem;
  width: 4rem;
  height: 2.472rem;
  border-right: 1px solid black;
}

   <nav>
        <div class="button">Home</div>
        <div class="button">Some longer txt</div>
        <div class="button">Short</div>
    </nav>

如您所见，当文本很短因而没有被包裹时，它不会居中。我该怎么解决？

谢谢！