如何使覆盖有图标的输入栏具有响应性，并垂直居中它所在的窗体？

<div class="container">
  <input type="text" class="input-field" placeholder="输入内容">
  <span class="icon"></span>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度为视口高度，实现垂直居中 */
}

.input-field {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("icon.png"); /* 替换为实际的图标路径 */
  background-size: cover;
}

const inputField = document.querySelector('.input-field');

inputField.addEventListener('input', (event) => {
  const inputValue = event.target.value;
  // 根据输入内容进行相应的操作
});