我试图在页面中间居中放置一个元素。我可以将其居中，但如果我垂直调整页面大小，直到视图高度小于居中元素，元素将垂直移出屏幕，而不显示滚动条。你可以在这里看到这个问题的演示：
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner {
display: inline-block;
width: 400
浏览 1提问于2017-02-23得票数 1
我有这样的结构(简化)：
<div id="outer" style="display: table-cell">
<div id ="someOtherDiv">.......</div>
<div id="inner" style="text-align: center; vertical-align: middle">
<img src="path" />
</div>
</div>
我需要
浏览 1提问于2018-09-14得票数 0
有许多方法可以使div元素在屏幕上垂直和水平居中，但没有一种方法解决了我面临的问题。
需要解决的问题是，如果居中div的高度远远大于屏幕高度，那么居中元素的顶部将被剪切，此时居中的div应该顶部对齐，并且应该显示垂直滚动条以供使用。换句话说，页面高度应该等于居中的div高度。
我想放在屏幕中央的div中提供的数据是动态的，所以我不知道居中div的高度，但在大多数情况下，它的高度都小于页面高度。
我想要像Gmail登录页面的东西。
下面是代码
div {
width: 200px;
height: 200px;
background-color: green;
浏览 3提问于2018-05-04得票数 0
1回答
我使用灵活的jquery旋转木马库来显示延迟加载的单个图像。
图像是加载和显示OK，他们是与屏幕水平和居中水平。
我面临的问题是，我无法使图像缩小到适合屏幕垂直(当它们大于屏幕高度)，也不能使它们垂直中心(当它们比屏幕高度短)。
理想的情况下，我希望巧妙地将自己与父母的div相匹配。
$(document).ready(function() {
$('.image-slider').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToS
浏览 2提问于2017-03-31得票数 0
回答已采纳
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
4回答
我想在屏幕中间居中显示一段文字。我想使用bootstrap将文本居中显示在屏幕中间，以节省一些时间。
我这样做了，但块仍然在中间的水平，而不是垂直和水平。
CSS：
.block {
top: 50%;
left: 50%;
}
HTML：
<div class="row">
<div class="col-xs-4">Text</div>
</div>
浏览 5提问于2015-01-23得票数 1
6回答
我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。
有人能建议我怎么才能得
浏览 0提问于2012-03-09得票数 38
回答已采纳
1回答
我正在尝试将主要内容垂直对齐屏幕的中心。我做了垂直居中的div。但是由于标题的原因，我不能做屏幕的中心。我想做的主要内容垂直居中的屏幕时，标题在那里。任何帮助都将不胜感激。
我已经在上构建了它，所以你们可以使用它。
html {
height: 100%;
}
body {
background: #13385f;
height: 100%;
}
.nav-menu a {
color: rgba(255, 255, 255, .5);
text-decoration: none;
}
.nav-menu a.active {
color: white;
浏览 2提问于2020-06-27得票数 0
我正在看这个页面- https://getbootstrap.com/docs/5.0/components/modal/ 此示例显示了垂直居中模式。 <!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div> 默认情况下，它也是水平居中的。 但是模式在屏幕中居中，我想让它在<div>元素中居中。 我该怎么做呢？ 我目前使用的是bootstrap版本5。
浏览 25提问于2021-08-11得票数 0
我在流体容器中对齐'ul‘元素的最后一行时遇到了问题。我让容器在页面中正确居中，但当最后一行元素未完全填充时，它最终以元素居中结束。似乎找不到解决方案。
我在内核使用Twitter Bootstrap，在外部div使用container-fluid。并使列表元素居中，如下所示：
ul {
text-align: center;
list-style:none;
}
ul li {
display: inline-block;
}
我尝试过使用text-align: justify并将div居中并加上页边距，但它似乎不会随着页面大小的调整而移动。有什么建议吗？
浏览 4提问于2012-09-20得票数 4
假设我有两个div：
<div id="divOuter">
<div id="divInner"></div>
</div>
假设外部div在页面下方约3/4，居中(水平)在屏幕上，宽度为200px。显然，内部div最初会在这个位置。如何将内部div保持在相同的垂直位置(即当前的垂直位置)，同时将其一直移动到屏幕的左侧？
浏览 0提问于2013-04-24得票数 0
我想在div中水平垂直居中一张图片(根据屏幕大小改变尺寸)。该div的位置是绝对的，高度为100%。在该div下，将放置另一个div。
我做了一个
<body>
<div id="wrapper">
<div id="div1">
<div id="center">
<img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg">
浏览 0提问于2013-12-15得票数 2
1回答
是否可以根据浏览器屏幕高度垂直对div进行居中？
我有这个
#success {
height: 300px;
top: 50%;
margin-top: -150px;
position: absolute;
}
但是它垂直于它的父div，而不是基于浏览器屏幕的高度。有什么办法能让我实现我想要的吗？谢谢!
浏览 1提问于2014-04-14得票数 0
回答已采纳
21回答
我想使一个position: fixed;弹出框居中的屏幕与动态的宽度和高度。为此，我使用了margin: 5% auto;。如果没有position: fixed;，它可以水平居中，但不能垂直居中。添加position: fixed;后，它甚至不会水平居中。
以下是完整的设置：
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
backgrou
浏览 5提问于2010-01-05得票数 513
回答已采纳
3回答
基本上，我的问题是关于容器中的文本。当屏幕尺寸变小时，它会进入下一行。此时，它不再垂直居中，因为出现了一条新线。
我怎样才能保持它垂直居中？
<div class="low">
<h4 class="title"> Text to be centered. </h4>
</div>
我通常会为每个换行符调整填充，但这样做既麻烦又耗时。一定有更好的方法。
浏览 14提问于2017-06-29得票数 10
回答已采纳
我正在用创建一个在线演示
默认情况下，内容位于屏幕中间。我下载了源代码，将演示文稿放在我计算机的记事本中，它是perfect.But，当我将演示文稿放到我的网站上时，内容水平居中，而不是垂直居中。
尽管源代码完全相同，但输出是different.Here is 。内容没有垂直居中。我尝试手动放置
<div style="position: absolute;
top: 50%"
>text</div>
但是输出远没有接近50%……(它在顶部:40px左右，左侧:50px左右(一些不相关的奇怪位置)
有任
浏览 0提问于2013-02-03得票数 0
回答已采纳
6回答
我有一个问题与居中的HTML (垂直和水平)的div。我的代码看起来像这样：
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
只有chrome将这个div居中到屏幕的中间。
浏览 4提问于2012-04-24得票数 5
回答已采纳
3回答
我正在开发我的网站的移动版本，我在垂直居中放置两个div时遇到了麻烦。因为它是一个移动网站，我的css需要在任何类型的屏幕分辨率上工作，所以这就是我遇到问题的地方。此外，根据您所在的页面，将使用不同的图像，因此图像的分辨率也不是静态的。我需要一种方法来居中我的图像div和文本div，无论他们的高度或宽度。
我在这里创建了一个。如你所见，我选择了green area作为手机的“屏幕”，我希望图片垂直居中，文本也位于图片顶部和垂直居中。有什么帮助吗？
到目前为止我所拥有的..。(在我的jsfiddle中)
HTML：
<div id = "screen">
&l
浏览 0提问于2013-11-20得票数 0
我需要让更进一步。
我拥有的div是使用以下代码垂直居中的：
var boxheight = $('#notifications').height();
var windowheight = $(window).height();
var boxheight = $('#notifications').height();
var pagecenterH = ((windowheight-boxheight)/2);
$('#notifications').animate({'top': pagecenterH});
如果页面只有窗
浏览 1提问于2010-12-28得票数 0
回答已采纳
我尝试将一个元素在页面上垂直居中。这很好用。但是如果我添加一个导航栏，元素会垂直居中，但与导航栏的高度有一定的偏移。如何将内容容器垂直居中，包括导航栏高度？ body,html {
height: 100%;
} <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqu
浏览 43提问于2021-10-12得票数 1
回答已采纳
4回答
我需要把DIV放在屏幕中央，无论是水平还是垂直，我不知道DIV的大小，并且div是position:fixed;。
这个负边距技巧不起作用，因为我不知道div的大小。top:50%; left:50%; magin-top:-100; margin-left:-100;
margin-left: auto; margin-right: auto;不工作，因为它不能与position:fixed;一起工作，margin-top:auto; margin-bottom:auto;也不能垂直居中；
我发现这个方法：display: table-cell; vertical-align: middle
浏览 0提问于2012-05-20得票数 7
2回答
我有一个div，我想定位在一个页面的中心(垂直和水平)。
对于水平对中，我在div周围使用了中间的标记，对于垂直对中，尝试了几种方法，但它们都没有真正工作。
查看代码：
CSS：
.vcenter{
height: 50px;
width: 50px;
background: red;
vertical-align: middle;
margin-top: calc(50% - 25px);
}
HTML：
<center>
<div class="vcenter">
</div>
<center&
浏览 4提问于2016-04-18得票数 2
回答已采纳
下面的html创建一个页面，页面的<html>高度= 8，<body>高度= 0，但是具有“居中”的div也在屏幕上垂直地居中。怎么会这样呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style=" height:100px; width:200px; margin: auto; position: absolute; top: 0; left: 0; bott
浏览 9提问于2015-06-22得票数 1
回答已采纳
3回答
我正在做一个小的抽搐脚趾游戏，我有一个问题，垂直调整我的TDs的内容。正如您在下面的屏幕截图中所看到的，我将垂直对齐属性应用于选定的TD，但文本仍然没有垂直居中，并且仍然略低于正方形的中心。
如何正确地对齐TDs的内容？
我在这个中上传了源文件，以防需要它们。
提前感谢
我附上用户Maik建议的相关代码。
<div class="row"><div class="column d-flex justify-content-center">
<table>
<tr>
浏览 8提问于2022-03-06得票数 1
1回答
我有一个垂直和水平居中的div：
#mydiv {
width:960px;
height:400px;
position:fixed;
margin-left:-480px;
margin-top:-200px;
top:50%;
left:50%;
}
当我使用Smoothscroll.js库时，它不能工作。如果我去掉“position: div /position:absolute”，它就会居中，但是我的div就不再居中了。有没有什么方法可以同时实现平滑滚动和居中？
浏览 0提问于2015-01-17得票数 0
2回答
问题
我已经参考了这个和这个，但是我的表单元素仍然没有像他们应该的那样居中(我已经尝试了flex，我已经尝试了填充，我已经尝试了拉伸，等等)。我希望两个表单域都在屏幕上垂直和水平居中。
我已经将表单元素包装在一个div中，但它仍然不起作用。如果有人能让我知道如何做到这一点，将不胜感激！
我希望这些字段显示在彼此的下方。我希望字段在屏幕上垂直和水平居中。
代码
body {
background: #3472FF;
color: white;
}
.closeBtn {
position: absolute;
top: 20px;
right:
浏览 6提问于2017-03-14得票数 1
我想在Bootstrap容器中将每个图像垂直居中。每个图像都使用"img-fluid“类，这样它就占据了相对于屏幕大小的整个列的宽度。通常，我会在图像顶部添加50%的边距，并抵消图像大小等于px图像大小一半的负边距，但是由于图像大小不是恒定的，这将不起作用。我尝试使用“垂直对齐:居中”来居中图像，但是这似乎也不起作用。
HTML：
<div class = "container-fluid">
<div class = "row text-center">
<div class = "col-
浏览 1提问于2020-01-10得票数 0
1回答
我，我试着把卡片垂直地和水平地放在页面的中间。我，能够将卡片水平地居中。但不能像垂直方向一样对中心。我没有在MDL中找到任何类来垂直对卡进行居中。
中心水平代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
<div class="mdl
浏览 1提问于2017-12-13得票数 7
回答已采纳
1回答
简写版：
我使用的是Bootstra3.3.7，在需要的地方有一行：
当屏幕足够宽时，列将是水平的。
当水平时要垂直居中的列内容。
当屏幕太窄时，要垂直堆叠的列。
列高并不相同，也不能预先知道。我如何实现我的三个目标？
详细信息：
我有一个视觉组件在我的网页，有一个图像在LHS和一些文字在媒体块上的RHS。媒体块比图像高(具体取决于文本的屏幕宽度和包装)。
我们使用的是引导程序3，因此它的基本HTML是：
<Row>
<Col md={6}>
<img src="myimage.jpg"/>
</Co
浏览 2提问于2017-04-13得票数 1
回答已采纳
我试图在屏幕上显示一个以水平和垂直为中心的React旋转组件，在搜索和读取不同的类似答案之后，例如这个，我可以将它水平地对中，目前我的代码如下：
import ClipLoader from "react-spinners/BounceLoader";
function Spinner() {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "cente
浏览 23提问于2022-11-09得票数 -1
回答已采纳
使用React，我有一个摄像头视频，当视频的高度是屏幕高度的100%时，它必须始终居中。我让视频垂直填充屏幕，但是如果我改变窗口的宽度，视频不会居中。
return (
<div style={style.container}>
<video style={style.video}
ref={this.videoRef}
autoPlay={true}></video>
</div>
)
const style = {
container: {
position: '
浏览 0提问于2019-01-09得票数 1
我发现了这种垂直居中的方法，这种方法似乎很常见。
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
我在这里试图居中的是整个网站，当屏幕预览大于div高度(大于740px)时，这段代码可以完美地运行。但是，一旦浏览器窗口最小化到小于div的垂直大小(740px)，标题的某些部分就会在页面顶部上方消失。
我可以在某种程度上理解为什么会发生这种情况，因为50%变得不到div大小的一
浏览 0提问于2013-11-09得票数 1
1回答
我一直在努力寻找这个问题的答案，但我所找到的只是讨论将元素垂直居中的问题。
我想要做的是将div垂直居中，我知道如何使用css。问题是，如果高度太小，它仍然会居中并切断顶部和底部。
下面是我的意思的一个演示：
全屏演示：
你能告诉我如果高度太小该怎么对齐吗？最好不要JS。
谢谢,
马库斯
浏览 3提问于2012-04-21得票数 0
回答已采纳
1回答
在屏幕上居中(水平和垂直)对齐<div>最兼容的方法是什么？
我目前正在使用CSS：
div.myBlock
{
position:absolute;
width:500px;
left:50%;
margin-left:-250px;
height:500px;
top:50%;
margin-top:-250px;
}
这在现代浏览器中工作得很好，但在老式的chrome/firefox等浏览器中就会变得一团糟。
它用于基本的弹出窗口，如FaceBook上的弹出窗口。
有什么想法吗？也许使用JS/jQuery是有效的？
浏览 0提问于2011-10-06得票数 3
回答已采纳
1回答
下午好,
我正试图在抽屉中垂直居中一个图像按钮(为了测试，我使用了一个黑盒)。我已经设法使框水平居中，但我尝试了所有方法，但无法使其垂直居中。我可以将它居中一次，但在手机上，它将不再居中，或当我改变屏幕的方向。因此，我想要的是始终在抽屉的垂直中间显示框，无论方向或屏幕大小如何。
整个页面都在这里：
如果有任何帮助，我将不胜感激。
浏览 1提问于2015-09-02得票数 0
我想创建一个居中(水平和垂直)的div。它应该随着屏幕的变化而改变大小，但周围有5个像素的边距。
浏览 0提问于2012-06-24得票数 1
回答已采纳
在Android中，我需要使用XML布局(而不是编程)来设计一个简单的布局：
我需要具备以下条件：
1-左侧的小图像视图(垂直居中)
2-三个图像视图彼此相对较大(垂直居中)
3-右侧的小图像视图(垂直居中)
因此，这5个图像在水平方向上相邻，在垂直方向居中。
这很简单，不管怎样，问题是如何指定图像视图的大小调整为屏幕高度的百分比？
因此，如果我将这三个图像项指定为屏幕高度的60%，我希望imageView将调整大小(包括源图像)为屏幕高度的60%。
这是可以实现的吗？
谢谢
浏览 0提问于2012-08-30得票数 4
1回答
在vuetify中，我想水平/垂直居中旋转的轮子。到目前为止，我有这个，但它不是垂直居中。我怎么才能修复它呢？
<div id="app">
<v-app id="inspire">
<v-card height="200">
<v-layout column align-center justify-center>
<v-flex>
<v-progress-circular indetermi
浏览 0提问于2019-08-03得票数 3
2回答
引导div放置
、、
<div class="row">
<div class="col-xs-6">
<img src="img.png" width="100%" />
</div>
<div class="col-xs-6">
<div class="row"><p>Main text</p></div>
<div class=
浏览 3提问于2016-03-01得票数 0
回答已采纳
就像标题中所说的那样，我想在屏幕中间对一些框(比如说登录框)进行居中。在此框下，我想显示其他几个框(附加信息/免责声明等)。
编辑:更准确地说:居中登录框，必须是垂直和水平居中，并停留在那里。附加框应该出现在居中的登录框下面。
做这件事最简单的方法是什么？
HTML：
<div id="centeredBox">
I am centered and have some undefined size (cause I could display some image
</div>
<div id="underCenteredBox&#
浏览 5提问于2015-11-12得票数 1
回答已采纳
我使用的是，但所涉及的div非常长，因此屏幕上会显示加载消息。
有没有办法让jquery blockui在可见屏幕上垂直居中加载消息，这样人们就可以在不向下滚动的情况下看到消息？
浏览 3提问于2012-02-05得票数 8
回答已采纳
1回答
我试图水平和垂直居中我的div的内容。我找到了一些解释它的线程，但它从来都不适合我的代码。
在另一个div (.block)中有3个居中的div (.container)，它也是居中的，但在屏幕上。块的内容不会垂直居中。我尝试使用行高，但我丢失了一些文本(块外)。
下面是我的代码：
.container {
width: 70%;
margin: 10px auto;
position: relative;
text-align: center;
border: 1px solid black;
}
.block {
background-imag
浏览 5提问于2017-07-22得票数 0
回答已采纳
我正在使用HTML5全屏模式和全屏父div，在这种模式下，我想垂直居中显示图像，但前提是图像比父div小(即。屏幕尺寸)。我还希望将图像限制为父图像的max-height = 100%，以避免在图像大于屏幕时放大。
我可以使用两个display:table (一个div，另一个div)居中显示图像，但不能同时将图像max-height设置为不大于父div。我可以使用position:absolute; max-height:100%;来实现后者，但是在较小的图像上居中就不起作用了。
示例标记：
<div id="fullscreen-container">
浏览 0提问于2012-06-04得票数 1
1回答
我有一个已知宽度但高度未知的div ( height :auto)。
它需要动画到视图中，然后在浏览器中垂直和水平居中。它的父母是身体。
我使用animate.css CSS库来执行动画。
如果我使用平移将div居中，那么动画将div向下和向右偏移，然后，当动画完成时，它会“捕捉”回屏幕的中心。
我猜是不是和翻译有些冲突？
任何想法都将不胜感激。
浏览 25提问于2020-02-08得票数 0
我在一个网站上工作，客户希望有类似的东西：有几个覆盖层连接到屏幕的边缘，而中间的文本以这样一种方式包含，即原始浏览器滚动条保持可用。这种设计是弹性的，允许它至少垂直伸展通过额外的div。
关于我的设计的棘手之处是:我有一个固定大小的div，它应该在垂直和水平方向上居中。我现在需要的是更多的div，它们围绕在居中的div周围，并随着用户调整窗口大小而扩展，以便作为覆盖来隐藏它们下面的文本。
基本上就是这样：
因此，进一步分解，我需要的是一种方法，让周围的四个div自动扩大或缩小它们的大小，以便它们总是填满整个屏幕。
有没有办法在没有Javascript的情况下做到这一点？
浏览 3提问于2011-03-04得票数 2
回答已采纳
2回答
我有2个图片在我的主页上，这是垂直居中。
#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
但是，我希望它们在水平和垂直方向上都居中。
当我不使用float: none !important;时，图像水平居中，而不是垂直居中。当我使用f
浏览 3提问于2016-03-11得票数 0
3回答
下面的代码显示了一个徽标及其背景。我不能让徽标垂直居中。是因为背景div没有定义高度吗？如何才能使背景始终是屏幕大小的100%并带有居中的徽标？
body {
margin: 0;
}
#header {
min-height: 100%;
width: 100%;
position: absolute;
background-color: #CCC;
}
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
<div id="heade
浏览 3提问于2015-08-07得票数 0
1回答
如何将整个站点居中显示在屏幕的中央？
水平方向和垂直方向；
这是，看它是水平居中，垂直居中，现在缺少(任何分辨率)
可以在上随意修改源代码。
浏览 0提问于2011-05-12得票数 1
1回答
页面结构：
div#help
-- div
-- ul
-- li
-- li
-- div
-- ul
-- li
-- li
-- div.message_shower
-- p /*small `x` for close button*/
-- div.content
每当单击任何列表项<li>时，都会打开具有某些文本的div.message_shower。
(您可以忽略JS和HTML选项卡)
问题：--我想把div.message_shower放在屏幕的中间，无论是水平的还是垂直的。即使在使用百分比单位后，它也不起作用
浏览 2提问于2014-08-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
