居中div大于其容器溢出滚动

是指当一个居中的div元素的内容超出了其容器的大小时，容器会出现滚动条以便用户可以滚动查看全部内容。

在前端开发中，可以通过以下步骤实现居中div大于其容器溢出滚动的效果：

创建一个容器元素，设置其样式为相对定位（position: relative）。
在容器元素内部创建一个div元素，设置其样式为绝对定位（position: absolute）。
将该div元素的左右边距设置为auto，上下边距设置为0，使其水平居中。
设置该div元素的宽度为大于容器的宽度，可以使用百分比或像素值进行设置。
将容器元素的溢出属性设置为auto，这样当div元素的内容超出容器大小时，会自动出现滚动条。

这种布局方式常用于需要居中显示内容，并且内容可能超出容器大小的情况，例如图片展示、长文本显示等。

在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来搭建前端开发环境和部署网站，使用对象存储（COS）来存储和管理静态资源文件，使用云数据库（CDB）来存储和管理数据，使用云函数（SCF）来实现后端逻辑，使用内容分发网络（CDN）来加速网站访问，使用云安全中心（SSC）来提供网络安全防护等功能。

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

云服务器（CVM）：https://cloud.tencent.com/product/cvm
对象存储（COS）：https://cloud.tencent.com/product/cos
云数据库（CDB）：https://cloud.tencent.com/product/cdb
云函数（SCF）：https://cloud.tencent.com/product/scf
内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
云安全中心（SSC）：https://cloud.tencent.com/product/ssc

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【布局技巧】Flex 布局下居中溢出滚动截断问题

overflow: auto; } 效果就变成了这样：我们尝试滚动一下这个容器，会发现一个致命问题：容器只能向左滚动，无法向右滚动，因此只能看到后半部分被截断的内容，而无法看到前半部分被截断的内容：...其中一类比好好的解法在于，当 flex-item 不足以溢出时候，flex-item 居中展示，而当 flex-item 的数量溢出父容器宽度时候，布局上采用类似于 justify-content: flex-start...正常效果应该如下：上面第一、第二行就是 flex-item 不足以溢出时候，flex-item 居中展示，而第三行，就是当 flex-item 的数量溢出父容器宽度时候，布局上采用类似于 justify-content...方法一：Flex 布局下关键字 safe、unsafe 其实，规范也已经注意到了布局下的这个居中滚动问题。...其效果与方法一类似，就不再额外贴 Gif 图。

4331 0

前端知识点总结（html+css）（上）

它决定了其子元素如何定位，以及其它元素的关系和相互作用。...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....13. div水平垂直居中的几种方式。...绝对定位(子绝父相) 这里是父容器这里是子容器 .father {...绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中) 这里是div .center {

3061 0

CSS 居中

--html代码--> div居中了 body{ text-align:center} .center{ margin:0 auto;...--容器内的元素将会居中--> .container{ display: flex; justify-content: center...四、对照表所用样式支持的浏览器是否响应式内容溢出后的样式 resize:both 高度可变主要缺陷 Absolute 现代浏览器&IE8+ 是会导致容器溢出是是* ‘可变高度’的特性不能跨浏览器...负margin值所有否带滚动条大小改变后不再居中否不具有响应式特性，margin值必须经过手工计算 Transform 现代浏览器&IE9+ 是会导致容器溢出是是妨碍渲染 Table-Cell...&IE10+ 是会导致容器溢出是是需要使用容器包裹和厂商前缀（vendor prefix）持续更新······ 如有建议或其他实现方法，欢迎留言交流~

3.2K1 0

一文带你响应式网页设计入门

在这种情况下，我们可以使用另一种技术-水平滚动。使用内容溢出滚动条进行水平滚动可能会有这样一种情况：您的内容会溢出界面，而没有一种优雅的处理方式去解决。...没关系，内容溢出滚动条可以为你解决这个问题。此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。...another item overflow-y: scroll 这个CSS是关键，通过设置overflow，子元素将通过水平轴溢出并出现横向滚动条...> 在此示例中，我们将视频嵌入为iframe和一个div带有videoWrapper类的容器。...position: relative 容器元素上的子元素允许子元素利用相对于其的绝对位置。

4.8K2 0

盒模型

# 控制溢出行为当明确设置一个元素的高度时，内容可能会溢出容器。当内容在限定区域放不下，渲染到父元素外面时，就会发生这种现象。...用 overflow 属性可以控制溢出内容的行为,支持： visible（默认值）——所有内容可见，即使溢出容器边缘 hidden——溢出容器内边距边缘的内容被裁剪，无法看见 scroll——容器出现滚动条...在一些操作系统上，会出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）。不过，在这种情况下，滚动条不可滚动（置灰）。...auto——只有内容溢出时容器才会出现滚动条通常情况下，建议使用 auto 而不是 scroll，避免滚动条一直出现。 visible，CSS入门容易，但精通不易。...CSS 中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。

1.9K2 0

CSS深入理解学习笔记之overflow

滚动条的宽度机制：　　　　滚动条会占用容器的可用宽度或高度。 ?...水平居中跳动问题修复：　　　　①html{overflow:scroll;}; 　　　　②.container{padding-left:calc((100vw - width) * .5);}——100vw...是浏览器宽度，width是居中容器宽度。...滚动条的尺寸也是17px。　　文本溢出省略号显示属性text-overflow:ecllipsis。前提是white-space:nowrap以及overflow:hidden。...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。

4.1K5 0

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

搭配使用 ; 子元素使用绝对定位 , 父元素要使用相对定位 ; 子元素使用绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖父容器的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了...需要居中对齐的地方很多 , 如下图所示 , 右侧的固定定位按钮 , 需要在浏览器中居中对齐 , 轮播图中的五个小圆点的容器需要居中对齐 ; 1、设置固定尺寸使绝对定位元素水平 / 垂直...居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ; 2、先偏移50%再回退固定值父容器盒子如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题...class="one"> 显示效果 : 12、z-index...; hidden : 子元素超出父容器的部分隐藏 ; scroll : 不管子元素是否超出父容器 , 都显示滚动条 ; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条

1491 0

50道CSS基础面试题

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...div： border: 1px solid red; margin: 0 auto; height: 50px; width: 80px; 浮动元素的上下左右居中： border: 1px solid...BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算BFC的高度时，浮动元素也会参与计算。...父级div定义zoom 21 上下margin重合的问题在重合元素外包裹一层容器，并触发该容器生成一个BFC。...参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。

1.5K5 0

CSS 中你需要知道 auto 的一切！

要使.item获得其容器的全部高度，我们可以使用以下方法之一: 给.wrapper一个固定的高度，然后为.item元素添加height: 100% 对.wrapper使用...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...，但会增长以吸收flex容器中的任何额外自由空间，并会收缩到其最小尺寸以适合该容器，这等效于设置“ flex：1 1 auto”。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。根据MDN：取决于用户代理。...如果内容溢出，桌面浏览器会提供滚动条。

5.3K3 0

50道CSS面试题（附答案）

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...div： border: 1px solid red;margin: 0 auto; height: 50px;width: 80px; 浮动元素的上下左右居中： border: 1px solid...BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算BFC的高度时，浮动元素也会参与计算。...父级div定义zoom 21 上下margin重合的问题在重合元素外包裹一层容器，并触发该容器生成一个BFC。...参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。

1.6K3 0

50道 CSS 经典面试题（包含答案）

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算BFC的高度时，浮动元素也会参与计算。...父级div定义zoom 21 上下margin重合的问题在重合元素外包裹一层容器，并触发该容器生成一个BFC。...视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。...参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。

9713 0

CSS-03

# 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...visible(默认) : 　不剪切内容也不添加滚动条。...auto : 　超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条应用:溢出的文字隐藏 .hid-kk...应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。

2K3 0

H5C3第四节

任何一个容器都可以指定为Flex布局。 CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。...align-items(重点) align-items用于调整侧轴的对其方式，可选的值有： flex-start：元素在侧轴的起始位置对其。 flex-end：元素在侧轴的结束位置对其。...center：元素在侧轴上居中对其。 stretch：元素的高度会被拉伸到最大（不能给死高度）。...("mousewheel", function( e ) { // e.wheelDelta 鼠标滚动的量, 大于0向上滚, 小于0向下滚 if (e.wheelDelta > 0) {...设置每一个section的背景颜色 verticalCentered 设定每一个section的内容是否垂直居中，默认true， scrollingSpeed 设置滚动的速度，默认700毫秒 easing

5.3K3 0

【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ; /* 设置固定定位 */ position: fixed; top: 0; 由于顶部的导航栏设置了绝对定位 , 该元素是脱标的..., 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于顶部导航栏的高度 ; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...html lang="en"> 固定定位示例 /* 设置高度 1000 像素, 方便滚动设置...*/ body{ height: 1000px; } /* 最外层父容器盒子 */ .box { /* 子元素设置绝对定位父元素需要设置相对定位 */ position...class="top"> <div class

3K5 0

面试必备 css面试必考点

父级div定义zoom 21 上下margin重合的问题在重合元素外包裹一层容器，并触发该容器生成一个BFC。...29 元素竖向的百分比设定是相对于容器的高度吗？...视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。...参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。... 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

1.1K1 0

容器查询 cqw 和 CSS 数学函数 max

在许久之前，曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。...瑕疵在于，当时的 CSS 技术，其实没法判断当前文本内容长度是否超过了其容器宽度，导致即便文本没有没有超长，Hover 上去也会进行一个来回滚动，像是这样：容器查询 cqw 和 CSS 数学函数 max...背景描述大概是这样，感兴趣的同学，可以简单翻看一下上午提到的文章 -- 不定宽溢出文本适配滚动。... 其中，div 为容器，span 为文本内容。同时，我们利用容器查询，设置父容器 marquee 为容器查询的容器，并且将基于容器的inline-size 维度。...那么： width: 100% ，对于 span 行内元素而言，其文本长度就是其整个的宽度，100% 代表的就是文本内容的长度 width: 100cqw 表示的是设置了容器查询的 .marquee 的宽度

1.6K3 0

Web-CSS

父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。...both：清除左右两侧浮动 ---- 13.flex布局 flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。...center：元素在侧轴居中。 stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。...center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。 stretch：拉伸所有行来填满剩余空间。...flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值无效，默认为1。

8.6K2 0

css基础教程之布局属性

对于表格外的其他对象，其作用等同于hidden。....div{visibility:visible;} 五、overflow 内容溢出处理可以分拆：overflow-x,overflow-y 元素定义宽高之后生效 visible 对溢出内容不做处理...，内容可能会超出容器。...hidden 隐藏溢出容器的内容且不出现滚动条。 scroll 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。...auto 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。 .over{overflow:auto;}

5132 0

web前端学习摘要。

设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 2.响应式布局（responsive）针对越来越多的移动端设备，一个web设计能够兼容多个终端。...提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。 PC站常见布局 1. 一列布局（静态布局）：一列自适应居中 2. 两列布局：一列固定宽+一列自适应 3....典型应用：单行文本在容器中垂直居中。实现办法：让容器行高等于容器高度。 7. overflow：设置对象处理溢出内容的控制方式，针对的是容器内部的内容，不仅仅是单纯文本。此属性适用于块状元素。...内容可见，溢出到容器外部。...（默认值） hidden 溢出的内容被隐藏，无法查看 scroll 无论内容是否溢出，容器都被添加滚动条。（溢出才激活） auto 当内容溢出时，容器边缘（纵向）出现滚动条。

3.6K3 0

第122天：移动端开发常见事件和流式布局

initial-scale：初始缩放比，大于0的数字，一般设置为1.0。 maximum-scale：最大缩放比，大于0的数字。 minimum-scale：最小缩放比，大于0的数字。...通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。 touchend：当手指离开屏幕时触发。...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 8 栅格系统：Bootstrap...中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。...-- 20 .carousel-inner是所有轮播项的容器盒子， 21 注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义 22 --

3.6K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云