文章/答案/技术大牛

发布

css绝对居中小窗口溢出

CSS绝对居中与小窗口溢出问题

基础概念

CSS绝对居中是指将一个元素相对于其最近的已定位（非static）祖先元素进行水平和垂直居中。小窗口溢出问题通常发生在窗口尺寸小于元素尺寸时，导致元素部分或全部超出视口。

类型

水平居中：margin: 0 auto;
垂直居中：top: 50%; transform: translateY(-50%);
水平和垂直居中：结合上述方法或使用Flexbox、Grid布局。

应用场景

网页布局中的标题、按钮、图片等元素需要居中显示。
响应式设计中，确保元素在不同设备上都能正确显示。

遇到的问题及原因

在小窗口下，元素可能会溢出视口，导致部分内容不可见。这通常是因为元素的尺寸大于视口尺寸。

解决方法

使用媒体查询：根据窗口尺寸调整元素的样式。
使用Flexbox：
使用Flexbox：
使用Grid布局：
使用Grid布局：
设置最大宽度：
设置最大宽度：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Absolute Centering</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .centered-element {
            max-width: 80%;
            overflow: auto;
            border: 1px solid #000;
            padding: 20px;
        }
        @media (max-width: 600px) {
            .centered-element {
                max-width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-element">
            This is a centered element that will adjust its width based on the window size.
        </div>
    </div>
</body>
</html>

参考链接

通过上述方法，可以有效解决CSS绝对居中在小窗口下的溢出问题，确保元素在不同尺寸的窗口中都能正确显示。

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

有帮助

没帮助

使绝对div水平居中，当屏幕不够大时该div将向左对齐

css、css-position、centering

我有一个绝对定位的div (因为它包含的子div本身是绝对定位的)，我想要水平居中。我可以使用下面的CSS实现这一点position : absolute;margin-left :-256px; // half width ofdiv但是，当窗口不够大时，div会向左溢出。有没有办法在页面足够大的时候让它居中，而在其他情况下左对齐(只使用CSS)？

浏览 1提问于2012-10-02得票数 0

回答已采纳

2回答

缩放背景图像，使其始终保持其纵横比并居中

html、css、background、resize、scaling

我想设置一个网页背景图像，使其随浏览器窗口缩放，这样它就不会丢失其原始的纵横比(变得拉伸)，并且图像本身基本上保持居中。在窗口达到足够小的大小后，我希望图像在左侧和右侧都溢出(消失)，而不是像图像绝对定位时默认情况下那样在右侧溢出(消失)。如果您调整jsfiddle窗口的大小，您将看到只有当您不使窗口太高时，图像才会保持其纵横比。然后将图像垂直拉伸。position: absolute; wi

浏览 0提问于2013-11-13得票数 0

2回答

我试图在没有绝对定位的情况下在div中对图像进行居中，因为图像溢出到页面上的任何其他div上。例如，在容器div上方有一个div，它将包含按钮，但是图像正在溢出。有没有办法在没有绝对定位的情况下对图像进行居中？更多的信息-我用的是电子。在此之后，窗口的位置将更改为另一个html文件，当新页面完全加载时，将通过IPC发送请求以再次接收图像。然后将图像插入到页面上的img标记中。ipcRenderer.on('reply-snap', (event,

浏览 2提问于2016-06-29得票数 0

回答已采纳

1回答

我无法在Vuejs元素中创建此布局。

css、twitter-bootstrap、vuejs2

嗨，我尝试了所有可能的css组合，但我不能设法创建这样的布局。所有的卷轴，包括肚脐和标签控制。

浏览 0提问于2017-10-02得票数 0

回答已采纳

1回答

是否有可能在不实际隐藏溢出的情况下实现溢出隐藏的效果？

css、overflow

我有一个图像滑块，这是绝对定位，并有1280px的宽度。左边距是-160px，使其在其父对象中居中。父级宽度为960px，边距设置为'0 auto‘以实现居中效果。图像滑块应该只占用宽度:960px，这样溢出就不会导致浏览器使用滚动条来处理它。是否有可能实现类似overflow:hidden的功能，同时仍然以高屏幕分辨率显示溢出内容？问题示例：.slide-wrapper { width:960px; margi

浏览 0提问于2012-04-10得票数 0

1回答

jQuery UI对话框位置固定居中

javascript、css、jquery-ui-dialog、hallo-js

我尝试过CSS选项，但是因为top属性是动态设置的，所以CSS根本不起任何作用。我也尝试过将其居中到覆盖图上，但由于ui-overlay元素在初始化模态之前并不存在，所以我无法将其用作居中的archer。

浏览 5提问于2014-01-14得票数 0

3回答

图像未居中

html、css

我试图让我的徽标居中，但它总是在中心线的右边。我是CSS的新手，已经在谷歌上搜索了一个多小时的解决方案，但没有成功，下面是我的代码： width: 100%; display: block<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <LINK href="CLL1.css" rel=&qu

浏览 2提问于2012-11-06得票数 0

回答已采纳

2回答

帮助内部内容框边距/填充

html、css

我正在为一个新的网站布局工作，我在使用CSS实现我想要的东西时遇到了一些问题。首先，我希望所有内容始终保持在当前浏览器窗口的视图中，滚动显示在我的内容中，而不是浏览器本身。我有一个最外面的DIV，它作为我的“包装器”的网站显示居中，具有设置的宽度，并具有100%的弓形窗口高度。在其中，我放置了一个头文件，所有这些内容在所有感兴趣的浏览器中都能正常工作。如果我只是简单地给它边距或填充来弥补我绝对定位的页眉，内容将溢出，并且我不能设置滚动。如果我尝试直接设置大小，我没有可以输入的值，因为边距

浏览 0提问于2010-03-29得票数 1

回答已采纳

2回答

使用位置相对/绝对居中元素的最佳技术？

css

当我将父元素的position属性设置为relative，将子元素的位置设置为绝对(子元素是我试图居中的元素)时，我试图获得跨浏览器一致的居中位置目前在firefox中，它不是精确的居中，但ie6/7

浏览 4提问于2009-02-21得票数 1

回答已采纳

5回答

HTML/CSS内容始终居中

html、css

如何使页面内容居中，使其在每种屏幕大小上居中？例如，在上，如果我调整浏览器的大小，中心内容将向左移动，直到到达浏览器窗口。某些背景元素在水平方向上无限延伸(顶部为深灰色，中间为浅灰色，等等)。我可以在我的笔记本电脑和iMac上打开这个网站，它是居中的。我想我可以使用绝对定位从左侧移动内容x像素量，但这不起作用，因为300像素在小屏幕上居中内容，不会在大屏幕上居中。

浏览 2提问于2011-08-28得票数 5

回答已采纳

1回答

使网页居中并溢出

html、css

我知道如何使用CSS将网页居中，但我不知道如何在左侧和右侧都出现超大图像/滑块溢出的情况下将其居中。Square.com就是一个很好的例子。图像为1455px，但窗口容器设置为1020px。但是，当您将窗口变宽时，图像的更多部分会均匀地显示在左侧和右侧。我尝试了所有我能想到的CSS代码版本，但是没有成功。1020px的容器通常会剪掉图像的两面。

浏览 0提问于2013-02-13得票数 0

1回答

如何使hr标签扩展屏幕的全部宽度

html、css

我正在尝试使用一个div，它的所有子元素都有一个最大宽度，除了hr，所以它将扩展屏幕的全部宽度。这就是我现在拥有的不起作用的东西： margin-left: auto; max-width: 250px; height: 1px;} min-height:100%; height: 100%;}

浏览 1提问于2014-05-06得票数 1

回答已采纳

1回答

如何使多个绝对定位的div被视为背景？

css、html

我有一个主容器div，其中插入了站点的所有重要内容，800px宽，水平居中。我需要将多个绝对定位的div放在它下面(通过z-index)和宽度之外，而不会导致额外的滚动条出现，也不会丢失主容器滚动条(所以put溢出:隐藏在包装器中是行不通的)。换句话说，我想知道是否有可能创建包含不同元素(视频、图像或文本)的div作为背景，这样只有当窗口大小调整到800px以下(主容器的宽度)时，滚动条才会出现，而其余的div就会消失(类似于导致的嵌入式flash有没有办法通过css或javascript做到这一点？提

浏览 1提问于2011-12-08得票数 3

回答已采纳

1回答

scrollTo和.is(：动画)发现需要

javascript、jquery

我的目标是有一个文本区域列表，动态地创建和销毁，当我单击一个文本区域时，它会展开，收缩之前聚焦的文本区域(如果有)，然后在其父div中居中。我很难把它放在视野的中心。我有一个以窗口为中心的div，它从上到下伸展，允许溢出。这些令人头疼的内置“解决方案”让我想到了一些css操作，我将绝对位置设置为居中，然后遍历每个文本区，并将每个文本区的位置设置为离居中元素一定的距离。也就是说，如果第三个框被聚焦，那么它是绝对中心，那么框1被重

浏览 1提问于2013-06-20得票数 0

4回答

Jquery弹出模式必须居中

jquery、html、css

first query string value $('#' + popID).css$('#fade'

浏览 4提问于2012-05-06得票数 4

回答已采纳

1回答

Superfish菜单宽度加上居中对齐会导致页面右侧溢出

css、drupal、menu、superfish

我可以对CSS做些什么，在不破坏菜单的情况下消除额外的挂起吗？

浏览 0提问于2014-08-23得票数 0

4回答

使用CSS将图像完全居中？

html、css

我知道这是一个低级的问题，但是有没有可能将图片完全居中到网页的绝对中心，不管使用CSS对页面/窗口做了多少更改？我正在使用一个简单的标记，我需要知道如何？我一直在谷歌上寻找，但我没有得到任何相关的结果，可能是因为我缺乏正确的措辞……谢谢!

浏览 2提问于2011-03-11得票数 0

回答已采纳

2回答

拉伸图像只在较大的情况下

css

我正在尝试浏览css，并想知道这是否可以只使用css：例如，如果它更大：如果是小的话：可以单独使用css吗？

浏览 5提问于2013-05-10得票数 2

回答已采纳

1回答

小屏幕上的绝对定位布局问题

html、css、css-position

我的工作是一个非常小的飞溅页面，只有两个链接和一个大的居中背景与一些居中的文本。文本也是图像的一部分。链接是绝对定位在相对定位容器中的。这个网站不应该响应，但如果链接仍然定位在正确的地方，即使窗口变得更小，这将是很好的。这是可能的，还是我目前的方法不是很紧？facebook.png"></a> <a class="logo" h

浏览 0提问于2014-07-03得票数 0

回答已采纳

1回答