如何隐藏flexbox中的文本，然后在将flexbox项悬停在其上时使其显示？

<div class="flex-container">
  <div class="flex-item">
    <span class="hidden-text">隐藏的文本</span>
  </div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

.hidden-text {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex-item:hover .hidden-text {
  display: block;
}