要使一个div居中(水平和垂直),并且在向下滚动时不停留在中间,可以使用以下方法:
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>
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居中(水平和垂直),并且在向下滚动时不会停留在中间。这些方法适用于各种场景,例如在网页布局中居中显示一个弹窗、加载动画或其他内容。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云