如何使标签文本居中摆动

<div class="container">
  <span class="text">标签文本</span>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

.text {
  animation: swing 2s infinite;
}

@keyframes swing {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}