有没有一种简单的方法可以在div中垂直居中？
有一种简单的方法可以在div中垂直居中，即使用CSS的display: flex和align-items: center属性。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head><style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div>
这是一个垂直居中的文本。
</div>
</div>
</body>
</html>在这个示例中，我们创建了一个名为.container的CSS类，并设置了display: flex和align-items: center属性。这使得.container内部的所有元素都垂直居中。我们还设置了height: 100vh和justify-content: center属性，以使容器占据整个视口高度，并在水平方向上居中。
这种方法非常简单，并且适用于大多数现代浏览器。
相关·内容
我试图在页面中间居中放置一个元素。我可以将其居中，但如果我垂直调整页面大小，直到视图高度小于居中元素，元素将垂直移出屏幕，而不显示滚动条。你可以在这里看到这个问题的演示：
* { margin: 0; height: 100%; text-align-50%); display: inline-block;
浏览 1提问于2017-02-23得票数 1
我的问题很简单，我有一个<div>，里面有两个<p>标签，我想让一个在<div>中垂直居中，另一个在底部，有没有一种简单而干净的方法来实现这一点？
下面是代码：
浏览 1提问于2019-11-30得票数 0
1回答
有趣的是，问题出在Firefox中。每页单一的图片，可变的高度和宽度，必须垂直和水平居中，必须是流畅的(缩小为较小的浏览器窗口)，我只是寻找最新的浏览器支持(IE8，Chrome，FF3，Safari)
图像应根据浏览器的宽度调整大小(较小它可以在IE8，Chrome和Safari上运行，但不能在FF上运行。我意识到这是因为FF没有正确记录宽度。(例如，您将图像放在一个100%宽<
浏览 1提问于2009-08-21得票数 0
回答已采纳
4回答
我通常会使用绝对定位，并将顶部设置为50%，并设置负边距-顶部(孩子身高的一半)垂直居中。在这种情况下，这将不起作用，因为子元素的高度将发生变化。那么，有没有一种方法可以在不知道孩子身高的情况下将div在div中垂直居中呢？
浏览 0提问于2010-11-10得票数 5
回答已采纳
我在我正在开发的页面的顶部有一个导航栏。我想要一个特定的<div>居中(这是另一个<div>)。有没有一种简单的方法可以用CSS做到这一点？我尝试使用像素，但在调整窗口大小时不起作用。我试着让它水平居中，而不是垂直居中。我想要居中的<div</e
浏览 3提问于2010-11-21得票数 0
有没有一种在矩形中间绘制文本的方法？我可以找到各种对齐方式，但我尝试过的方式都不能使文本在矩形中垂直居中。
有没有一种简单的方法可以做到这一点，或者有什么方法可以将一个矩形居中，然后在其中绘制？我直接绘制到CGContext，尝试使用NSS
浏览 71提问于2009-08-19得票数 22
回答已采纳
1回答
有没有一种方法可以在固定大小的div中对可变大小的多行内容执行垂直居中，并隐藏溢出？目标是重现您在Excel单元格中可以看到的内容:当内容适合容器时，它应该垂直居中，当它较大时，溢出的部分应该隐藏(并且内容仍然垂直对齐)，就像在相邻内容不为空的Excel单元
浏览 1提问于2010-05-11得票数 2
回答已采纳
2回答
我希望垂直居中悬停文本覆盖，这是响应性的。这会将div的左上角与文本覆盖居中，而不是文本本身。有没有一种方法可以在顶部/左侧使用转换来居中文本本身？
我确实引用了，但我无法使用其他方法，比如垂直对齐。
浏览 2提问于2016-11-02得票数 0
4回答
中心DIV水平和垂直方向
、、、
我有一个HTML结构： <div class="metd"> </div>
这里的问题是，我不能将div "metd“水平和垂直地居中。我试过调整顶部、底部、左边
浏览 10提问于2015-06-13得票数 1
回答已采纳
1回答
我在一个移动网站上有一个简单的正方形SVG艺术元素。如何在纵向模式下水平居中，然后垂直居中？无论朝向和Safari&Chrome友好，基本上都是完美的中心匹配？？
有关于垂直居中的抨击。有没有一种简单而有效的方法来实现这一点？
浏览 1提问于2017-07-13得票数 0
在Qt中，当我将小部件添加到布局中时，它们默认是垂直居中的。有没有一种方法可以从上到下列出小部件，而不是垂直居中？
浏览 0提问于2012-04-10得票数 56
回答已采纳
2回答
以不同图像大小居中的幻灯片页面
、、、、
我有一个幻灯片放映，在页面中垂直/水平居中(通过窗口调整jquery)。解决方案是将此属性赋予居中DIV中的IMG：
margin:auto; top:0; bottom:0; l
浏览 2提问于2012-04-23得票数 0
4回答
我制作了方框并设置了行高，文本自动垂直居中。有没有一种方法或任何一种技巧可以将文本设置在框的底部？div { height: 100px; color: #333; line-height: 100px;
vertical-align: text-bottom
浏览 2提问于2012-05-26得票数 7
回答已采纳
2回答
我尝试将两个<p>元素垂直居中。我会尝试其他方法，但这里的大多数问题都指向那个教程。此代码段用于网页顶部的横幅。.banner { height: 69px; <<
浏览 0提问于2012-08-16得票数 16
回答已采纳
有没有简单的方法来确定某个div是否在屏幕的中间？我尝试过，但它也需要额外的代码。说到中间，我的意思是垂直和水平居中。谢谢!
浏览 1提问于2013-11-28得票数 0
2回答
我目前正在进行一项挑战，该挑战要求我在桌面上获取以下格式： ? 以及移动端的以下内容： ? 我正在努力尝试让左右两个信息框垂直居中(就像在桌面模式中一样)。我认为使用floats是最直观的(对我来说)。我一直在尝试使用相对定位来使它们居中，但我不确定这是否可行。同样，通常的垂直居中技巧似乎不起作用(因为它们通常需要绝对定位)。有没有什么最好的办法？class=&qu
浏览 19提问于2020-09-09得票数 1
回答已采纳
有时我希望div中的元素水平或垂直居中(而不是实际编写代码居中)，显然设计者在他们的应用程序中有网格来帮助他们做到这一点。有没有可能在css中创建类似这样的东西来绘制网格，或者为特定的div绘制一个简单的十字，这样就可以更容易地在该div中移动元素(因为这些线条可以指导我了解
浏览 2提问于2017-02-02得票数 1
4回答
为什么尝试垂直或水平(或两者)对齐视口(或包装器)中心的东西会如此痛苦？
在过去的一个小时里，我尝试了所有我能找到的网站，从W3Schools到S/O，再到MSDN --我只是不知道该怎么做。必须有一种简单的方法来做到这一点。为什么DIV可以像这样水平居中，而不是垂直居中呢？为什么不能对页面上的任何其他元素使用相同的<
浏览 15提问于2011-03-14得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
