如何使内容在屏幕上居中并在溢出时滚动
要使内容在屏幕上居中并在溢出时滚动，可以使用CSS和HTML来实现。以下是一种常见的实现方式：
HTML部分：
<div class="container">
<div class="content">
<!-- 这里是你的内容 -->
</div>
</div>CSS部分：
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
.content {
max-width: 100%;
max-height: 100%;
overflow: auto;
}解释：
- 首先，我们创建一个容器（container）来包裹内容（content）。
- 使用CSS的flex布局，设置容器的
display属性为flex，并使用justify-content: center;和align-items: center;使内容在屏幕上水平和垂直居中。 - 为了实现内容溢出时的滚动效果，我们给容器和内容都设置
overflow: auto;属性。这样当内容超出容器的尺寸时，会自动显示滚动条。
这种方法适用于各种类型的内容，包括文本、图像、视频等。你可以根据实际需求调整容器和内容的样式，例如设置最大宽度和最大高度来限制内容的尺寸。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我如何正确地居中#content而不溢出#container？margin: auto有点工作，但在我看来是一个黑客，我不想使用任何空白处与CSS。
请记住，#container有position: fixed。
下面的代码演示了这个问题：
document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')
#container {
position: fixed;
background: lightblue;
top: 0; botto
浏览 6提问于2017-10-31得票数 2
回答已采纳
1回答
以下代码在Chrome和大多数现代浏览器中将视频垂直和水平居中，但Safari除外，在Safari中视频只是垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
浏览 0提问于2016-07-22得票数 4
回答已采纳
1回答
如果flex容器有justify- content : center，并且有一个比容器宽的FLEX子容器，则内容在除IE10和IE11之外的所有浏览器中都保持居中(内容在两个方向上的溢出相等)。
在大多数浏览器中，你会得到这样的结果：
在IE 10/11中，你会得到如下结果：
我需要一种方法来在这些IE浏览器中实现居中布局，而不是完全抛弃flexbox方法。如果有必要，我对CSS hack IE的变通方法持开放态度。
下面是示例的一个小插曲：
.wrap {
width: 100%;
height: 100%;
}
.layer {
display: -m
浏览 5提问于2017-02-18得票数 7
回答已采纳
我有一个像这样的html布局：
<div class="container">
<div class="content">
// content goes here
</div>
</div>
我已经向容器div申请了100vh。我需要将内容垂直居中。我发现如果我将以下CSS应用于容器和内容，我可以将content div中的所有内容垂直居中，但我想知道这是不是一种糟糕的做法，我是否应该做一些其他的事情？
display: flex;
justify-content: center;
align-i
浏览 30提问于2018-08-28得票数 1
回答已采纳
我正在为大学的一个项目工作，我试图创建一个固定的页脚，同时使用flexbox布局。我试着调整各种高度和宽度，使用边距和溢出选项，但我就是不能让页脚表现得就像我改变了显示选项一样。我哪里错了？
body {
background-color: red;
margin: auto;
}
.container {
margin: auto;
width: 100vw;
height: 100vh;
background-color: green;
overflow-y: auto;
}
.maincontent {
margin: auto;
displa
浏览 0提问于2018-04-05得票数 0
1回答
我有一个DIV，这是缩放到可用高度使用CSS flexbox。在这个DIV中是一个图像，我想在两个维度上与DIV一起缩放。这意味着它应该在保持其纵横比的情况下进行缩放，并且小于相应DIV尺寸的尺寸应该居中。
我可以让图像跟随DIV的宽度，但不是高度。因此，肖像图像脱离了DIV边界。
这是一个演示该问题的。
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.box {
flex: 1 1 auto;
浏览 27提问于2015-05-20得票数 22
按照的回答，我试图为我的内容创建一个完美的高度，但是内容高度是溢出的，而不是在内容上滚动。我已经为这个场景制造了一个小提琴。请帮助我固定我的内容高度，这样的方式，顶部的内容，始终可见，并可向下滚动。
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto
浏览 0提问于2018-01-26得票数 0
回答已采纳
我正在尝试创建一个基于flex box的html布局，如下所示(参考图片)。
具有3行的视口(flex-direction: column)
顶部- "main header“中间- "home"bottom - "main footer”
然后是“主页”，左边是“菜单”，右边是“容器”。
“容器”要有
- top "container-header"
- middle "box container"
- botton "container-footer"
中间的“盒子容器”需要
浏览 2提问于2018-08-09得票数 2
我有一个弹出模式，它的整体工作，但一个烦恼是它有一个硬编码的max-height，我想消除。
选项1：最初探索了在模态上使用height: auto，它确实将模态高度保持在内容的自然高度。但是，当您将浏览器视图缩放到较短的高度时，这会影响模式的崩溃。模式溢出出视口，而不仅仅是绿色图像区域溢出.。
选项2：我知道max-content的可能性(对于height.甚至max-height ?)但我一直无法让它在任何地方工作，而且无论如何，它都有不稳定的浏览器支持。
选项3(当前)：将模式设置为height: 100%和max-height: 500px已经足够好了，但是内容显然需要更短一些。
总体
浏览 0提问于2021-02-24得票数 1
回答已采纳
2回答
调整未垂直居中的项目
、、、
我尝试使用flex boxes将内容垂直居中，但没有成功。我不喜欢使用position或translate，因为它不是固定大小。我的代码出了什么问题？
.row-centered {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.col-centered {
display: flex;
flex-direction: column;
align-self: flex-start;
float: none;
浏览 19提问于2017-01-26得票数 3
回答已采纳
我尝试使用作为参考，垂直地使用包含3 div的div。但是，我无法使用disply: flex和参考资料中提到的其他东西来实现它。问题是使用id="content"的整个div只能以水平中心为中心，而不是垂直中心。我也想把它垂直地放在中间。我该怎么做？
这里有一个。
这是我到目前为止尝试过的。
<div id="content">
<div class="container">
<div class="content-wrapper">
<div class=&#
浏览 8提问于2015-12-29得票数 0
回答已采纳
3回答
这是一个。下面是
<div class="overflow">
<div class="block">
<div class="header">
This is green header
</div>
<div class="content">
this is a lot of content<br> this is a lot of content<br> this is a lot of co
浏览 3提问于2017-02-17得票数 1
我一直试图让这些对象居中，当我使用<a href>标签时，我可以看到我可以在远离图片的地方单击，但链接仍然会激活。我假设这意味着子容器占据了每个容器宽度的50%，尽管容器只有很小的一部分是满的。为什么有空格阻止我对齐我的对象？
相关HTML：
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
浏览 0提问于2020-02-27得票数 0
我在试着为网络做一个棋盘游戏的领养。我想使用Bootstrap来使元素响应。
游戏的主要元素是一个矩形(游戏板)。这应该在所有显示尺寸中居中显示，并在所有边上留出一点边距。
我必须应用哪些属性和CSS规则？我应该使用普通容器还是容器-流体？
在容器/行中创建一列并给它一个"col-xs-12“类就足够了吗？
据我所知，这将适用于从最小到最大的所有设备。
到目前为止，我尝试了以下几点：
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
浏览 6提问于2016-04-01得票数 1
回答已采纳
我不能做水平的div在一个div。如果可以的话，我不能编辑尺寸！这是代码的一小部分。
HTML / PHP
echo '';
foreach ( $res as $service ) {
$serv = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $service->keyword) ) ) . "-k" . $service->id ;
echo
浏览 0提问于2020-08-20得票数 0
我有一个柔韧的布局，如下所示：
这很好，但是当产品描述很长时，我想隐藏溢出并显示省略号。
有一个包含类info-container的flex容器，它有2个flex子容器-- left (30%)和right (70%)。right div本身就是一个flex容器。问题是，当文本太长时，这个div会扩展：
HTML是：
<div class="info-container top">
<div class="left">
<div class="item-image-container"
浏览 6提问于2017-12-05得票数 0
回答已采纳
我有一个100%高和宽的页面，大小固定的img容器和每秒变化的img。Img在其容器内垂直和水平地居中。
问题是，当你向下滚动半个猫，滚动开始上下跳跃时，img变化。
有人能解释一下这种行为吗？我有一个来说明这个问题。
html：
<div class="to-change-container">
<img class="to-change"></img>
</div>
<div class="height-stratcher"></div>
css：
html, bod
浏览 4提问于2019-12-11得票数 0
1回答
向父div添加边框时，父div和子div之间出现空白。我已经尝试了所有的方法(溢出，(最小)高度/宽度，增加边框宽度)，但都不起作用。我在处理图像时也有同样的问题。 有人知道我如何解决这个问题吗?为什么会发生这种情况？ * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-conte
浏览 43提问于2021-08-20得票数 1
我花了几个小时试图让我的flex元素中的文本垂直对齐，但没有成功。感觉我遗漏了一些非常重要的东西！
HTML
<div class="flex-container">
<div class="flex-item">
test
</div>
<div class="flex-item">
test
浏览 2提问于2016-08-01得票数 1
3回答
问题摘要
我想要的布局是能够在页面上居中(垂直和水平)一个未知大小的图像。如果图像太大，无法适应任何方向，我想显示滚动条，以便用户可以滚动看到完整的图像。我遇到的问题是，当图像太大而无法适应时，图像的顶部和左边(取决于所切断的部分)将永远无法滚动。
尝试解决方案
我试图使用柔性盒来实现所需的布局，但柔性盒不是一个要求。下面是一个复制问题的小例子(请注意，我还没有在CSS中添加任何浏览器前缀，所以您想在Chrome或火狐中查看吗？)：
.body {
height: 600px;
}
.container {
margin: auto;
display: flex;
ali
浏览 1提问于2015-09-11得票数 17
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
