如何让div.modal-content始终位于页面正中间？

        <div class="input-container">
            <input id="inputBox" type="text" placeholder="请输入腾讯、爱奇艺等官方视频链接">
            <button id="confirmBtn">确认</button>
        </div>

如何让

始终位于页面的正中间内容：要使始终位于页面的正中间，可以使用CSS的flexbox布局和绝对定位来实现。

首先，将

的父容器设置为flex布局，并使用justify-content和align-items属性将其内容水平和垂直居中。代码如下：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.modal-content {
  /* 添加样式 */
}

接下来，给

添加绝对定位，并将其左右和顶部底部都设置为0，使其充满整个父容器。代码如下：

.modal-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* 添加其他样式 */
}

通过以上的CSS设置，

将始终位于页面的正中间。你可以根据需要添加其他样式和布局。