如何在包含滚动条的父div中将子div垂直居中？
在包含滚动条的父div中将子div垂直居中的方法有多种。以下是一种常见的解决方案：
- 首先，确保父div设置了固定的高度和相对定位（position: relative）。
.parent-div {
height: 300px; /* 设置父div的固定高度 */
position: relative; /* 设置相对定位 */
overflow-y: scroll; /* 添加滚动条 */
}- 子div需要设置绝对定位（position: absolute）和top属性为50%，同时使用负的margin-top将其向上移动自身高度的一半。
.child-div {
position: absolute; /* 设置绝对定位 */
top: 50%; /* 将子div的顶部定位到父div的中间位置 */
transform: translateY(-50%); /* 使用负的margin-top将子div向上移动自身高度的一半 */
}- 确保子div的高度不超过父div的高度，以避免内容溢出。
.child-div {
max-height: 100%; /* 设置子div的最大高度为父div的高度 */
}这样，子div就会在包含滚动条的父div中垂直居中显示。请注意，这只是一种解决方案，具体的实现可能会因项目需求和布局结构而有所不同。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我知道如何通过使用position: absolute在网页上垂直居中放置div；但是如何让子div调用内部容器在包含滚动条的父div调用消息框中垂直居中，红色截断内部容器如何解决这个问题？ position: absolute; left: 0; bottom: 0;
margin: auto
浏览 4提问于2018-08-22得票数 2
1回答
所以我一直在搜索，试图弄清楚如何让父div的高度等于它最大的子div的高度，同时使子div的最大高度相同，并在所有子div上强制水平垂直中心，其中可能包含图像。简而言之，使用具有两列和一行的表的结果，并且align和valign设置为中心。<div class="col2&qu
浏览 3提问于2013-03-15得票数 0
回答已采纳
2回答
我尝试将文本元素在流畅的布局中居中，这意味着<div>的大小不是固定的。但是，如小提琴中所示，Large Text元素并不是垂直放置在父<
浏览 0提问于2012-08-21得票数 0
我有一个div，其中包含两个子div，它们是流体布局的一部分，所以我不能在px中为它们设置固定的大小。这里有两个目标：
显然，这两个子div没有获得父div<
浏览 0提问于2013-08-01得票数 39
回答已采纳
我的代码包含3个div元素来显示表格数据。父div充当容器。第一个div子显示表头数据，第二个子显示行数据。我想显示水平滚动条在父div列较多，第二个子显示垂直滚动条，它只能滚动数据而不能滚动表头(表头有粘性)
当我水平缩放时，它应该滚动标题和数据，但当我垂直滚动时，它应该滚动表格数据，而不是标题
浏览 0提问于2015-01-08得票数 0
我想知道在不知道父div高度的情况下，是否有人知道如何在父div中垂直居中子div？我有一个pinterest样式的画廊页面(图像)，在悬停时，我会在图像顶部显示一个div，其中包含有关该图像的信息。因为每个图像可能有不同的高度，所以我不知道如何将子内容居中到父div
浏览 3提问于2013-02-01得票数 0
回答已采纳
我们在一个可滚动的父元素中有一个子元素。我们将子代变换为更大的比例。当transform-origin在左上角时，overflow: scroll可以正常工作，您可以滚动整个内容。当transform-origin在顶部居中时，它会缩放，但overflow: scroll仅从中点开始，并且无法滚动到子对象的前半部分。
} transform-origin: top left;.scale {
浏览 0提问于2017-08-05得票数 0
当我有很小的形象时。而它的父母更大(例如。200x200)然后，我希望图像在父文件中垂直和水平地居中。当图像较高时(如。(100×300)与父文件相比，我希望它放在父文件的顶部，并具有垂直滚动条，以便能够看到
浏览 5提问于2017-10-05得票数 1
回答已采纳
6回答
我已经将div中图像的边框设置为none。现在，我想要将该图像放在其包含的div中。我试过使用margin: 0 auto;，但不起作用。我确信我忽略了一些愚蠢的事情，但我想寻求stackoverflow社区的帮助，这样我就不需要花一个小时盯着屏幕就能搞清楚。非常感谢。<body> <div id="banner&
浏览 2提问于2010-01-26得票数 13
回答已采纳
我需要垂直对齐一个内联块元素，并在Internet上遇到了一个使用line-height属性的示例。id="line-parent"> vertical align using line height</div>
但是，如果父对象(#line-parent)仅包含子对象
浏览 1提问于2016-05-17得票数 0
嗨，我设置了容器div，用于在内容超出其大小时显示水平和垂直滚动条。它是最父div容器，其中包含div和swf flash对象(图表) <div style="padding: 20px;overflow: auto;overflow-y:</div>
上面的功能在firefox上运行得很好，所以水平和垂直
浏览 0提问于2012-01-31得票数 0
回答已采纳
5回答
如果您将下面的文件保存为html格式，您将看到垂直滚动条出现。由于高度为如果没有设置，它不应该自动扩展以适合所有内容吗？class="tabData">
<div style="height: 390px; background-color: Green;"
浏览 1提问于2013-04-11得票数 1
回答已采纳
我试图垂直居中一个具有contenteditable的子div，这样用户就可以在父div的中间键入，所以文本需要垂直居中。父div必须将它的显示设置为block，因为我需要它的顶部和底部边框具有它的容器的最大高度，因为它将被选择为一个调整大小的事件。我尝试过许多方法，如柔性盒
浏览 1提问于2017-03-21得票数 0
回答已采纳
我在html中有这样的情况： <div class="inner"></div>
height: 300px;}
height: fit-content;}
因此，我有了父div
浏览 12提问于2021-06-07得票数 0
46回答
我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少对Internet Explorer 6的支持。<body></body>
如何在所有主流浏览器(包括Internet Explorer6)中将div</
浏览 37提问于2008-12-28得票数 1523
回答已采纳
1回答
我有一个父容器(类似于弹出窗口)，其中有一个子元素附加到父容器中。子元素是一个包含一些文本的div。我想让文本在div中居中，这样文本在子div中保持居中对齐，但当文本超过3-4行时，文本应该垂直对齐。我可以在文本增长时垂直对齐，但当它仍然是一个小文本时，它应该垂直居中，这是不会发生的。任何帮
浏览 1提问于2012-12-28得票数 0
1回答
我想在一个有x重复背景的网站上放置一个徽标和菜单，我希望这两个总是显示在背景的同一区域(背景上有一个更亮的条纹，徽标应该始终在那个区域内，而菜单项应该在它下面一点)。这个页面是sarahreesbrennan-fans (dot) com，如果你看一下，你就会明白我的意思。(这只是为了看看我说的是什么，以防有人无法从描述中想象出来)。我的页面代码是：
<div id="bg_wrapper"><img src="/
浏览 1提问于2013-08-16得票数 0
我编写了一个VSTS仪表板小部件，我需要一些样式的帮助。我想有一个表生成(通过代码)为管理员显示数据。我需要你帮我做造型。<body>
浏览 40提问于2018-07-24得票数 -1
回答已采纳
1回答
滑块中的图像和文本排列
、、、、
我正在为一个网站做一个滑块，我希望图片在左边，相应的文本在右边。我已经做到了，但不是很完美。图像后面的div已经扩展到图像下面，文本按照div而不是图像进行居中。因此，文本&按钮出现在图像的底部边缘附近。我纯粹是通过ReactJS对网站进行编码，这是我的代码- width: 100%; display` disp
浏览 3提问于2022-08-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
