如何垂直放置文本字段输入居中？

<div class="container">
  <!-- 文本字段输入框 -->
  <input type="text" class="text-field">
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 设置父容器高度为视口高度，保证居中效果在整个页面可见 */
}

.text-field {
  width: 200px; /* 自定义文本字段输入框宽度 */
}