如何在不移动下面图像的情况下使文本在背景图像上居中？HTML/CSS

<div class="container">
  <p>居中的文本</p>
</div>

.container {
  background-image: url("背景图像的URL");
  background-size: cover; /* 背景图像的大小适应容器 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器的高度，例如使用视口高度 */
}

.container p {
  text-align: center; /* 文本水平居中 */
  color: #ffffff; /* 文本颜色 */
  font-size: 24px; /* 文本大小 */
}