使div居中(水平和垂直)，如果向下滚动，不要停留在中间

要使一个div居中（水平和垂直），并且在向下滚动时不停留在中间，可以使用以下方法：

1. 使用CSS Flexbox布局：
   • 在父容器上应用display: flex;和justify-content: center;属性，使子元素水平居中。
   • 在父容器上应用align-items: center;属性，使子元素垂直居中。

示例代码：

<style>

.container {

 display: flex;

 justify-content: center;

 align-items: center;

 height: 100vh; /* 设置父容器高度为视口高度，使子元素垂直居中 */

}

</style>

<div class="container">

 <!-- 内容 -->

</div>

1. 使用绝对定位和transform属性：
   • 将父容器设置为相对定位（position: relative）。
   • 将子元素设置为绝对定位（position: absolute）。
   • 使用top: 50%;和left: 50%;将子元素的左上角定位在父容器的中心位置。
   • 使用transform: translate(-50%, -50%);将子元素向左上方移动自身宽度和高度的一半，使其居中。

示例代码：

<style>

.container {

 position: relative;

 height: 100vh; /* 设置父容器高度为视口高度，使子元素垂直居中 */

}

.content {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

}

</style>

<div class="container">

 <div class="content">

   <!-- 内容 -->

 </div>

</div>

以上两种方法都可以实现div居中（水平和垂直），并且在向下滚动时不会停留在中间。这些方法适用于各种场景，例如在网页布局中居中显示一个弹窗、加载动画或其他内容。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
• 腾讯云移动开发（移动推送、移动分析等）：https://cloud.tencent.com/product/mobile
• 腾讯云音视频处理（点播、直播、实时音视频等）：https://cloud.tencent.com/product/vod
• 腾讯云安全产品（Web应用防火墙、DDoS防护等）：https://cloud.tencent.com/product/safety