如何垂直对齐到具有定义宽度/高度的 div 内容的中心?
Posted
技术标签:
【中文标题】如何垂直对齐到具有定义宽度/高度的 div 内容的中心?【英文标题】:How to vertically align into the center of the content of a div with defined width/height? 【发布时间】:2012-06-13 16:28:30 【问题描述】:在定义的宽度/高度div
中垂直居中任何内容的正确方法是什么。
在example 中有两个高度不同的内容,使用.content
类垂直居中的最佳方法是什么。 (它适用于所有浏览器,没有table-cell
的解决方案)
有一些解决方案,但想知道其他想法,一个是使用position:absolute; top:0; bottom: 0;
和margin auto
。
【问题讨论】:
您的问题应该是完全独立的。否则,当 URL 失效时,它就没用了。 可能重复:how can i vertically center text in a dynamically high div 可能,但那个时候没有我想要的解决方案……这提供了更多选择 tl;2020 年博士:display: flex; align-items: center;
。如果您不也希望它水平居中,请添加flex-direction: column;
。
【参考方案1】:
我对此进行了一些研究,发现您有四个选择:
版本 1:显示为表格单元格的父 div
如果您不介意在父 div 上使用 display:table-cell
,可以使用以下选项:
.area
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
Live DEMO
版本 2:带有显示块和内容显示表格单元格的父 div
.area
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
.content
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
Live DEMO
版本 3:父 div 浮动和内容 div 作为显示表格单元格
.area
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
.content
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
Live DEMO
版本 4:父 div 位置相对于内容位置绝对
我在这个版本中遇到的唯一问题是,您似乎必须为每个特定的实现创建 css。这样做的原因是内容 div 需要具有您的文本将填充的设置高度,并且margin-top 将被计算出来。这个问题可以在演示中看到。您可以通过更改内容 div 的高度 % 并将其乘以 -.5 来获得您的 margin-top 值,手动使其适用于每个场景。
.area
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
.content
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
Live DEMO
【讨论】:
@JoshMein:更多解决方案:how can i vertically center text in a dynamically high div 我正在寻找第 2 版,但内容没有垂直居中。area
包含在什么内容中,或者 content
内容是什么重要吗?【参考方案2】:
边距:all_four_margin
通过为 all_four_margin 提供 50% 将元素放置在中心
style="margin: 50%"
你也可以申请关注
边距:右上左下
边距:右上&左下
边距:上&下右&左
通过给出适当的百分比,我们可以在任何我们想要的地方获得元素。
【讨论】:
请澄清一下,您的措辞似乎有点乱七八糟。 答案不明确,措辞不好,仅限于列出margin
的可能值。【参考方案3】:
我在article找到了这个解决方案
.parent-element
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
.element
position: relative;
top: 50%;
transform: translateY(-50%);
如果元素的高度不固定,它就像一个魅力。
【讨论】:
JFYI,我发现了同一篇文章并使用了这种方法。我必须将位置更改为绝对位置才能在 Chrome 中工作。 @JackA。与 chrome 62 中的position: relative
一起使用。不知道可以追溯到多远。【参考方案4】:
这也可以使用display: flex
完成,只需几行代码。这是一个例子:
.container
width: 100px;
height: 100px;
display: flex;
align-items: center;
Live Demo
【讨论】:
@nihiser 仅当您还想将其水平居中,或者如果您设置了flex-direction: column
【参考方案5】:
将 div 的内容垂直居中的简单技巧是将行高设置为与高度相同:
<div>this is some line of text!</div>
div
width: 400px
height: 50px;
line-height: 50px;
但这仅适用于一行文本!
最好的方法是使用 div 作为容器,并在其中包含值的 span:
.cont
width: 100px;
height: 30px;
display: table;
.val
display: table-cell;
vertical-align: middle;
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
【讨论】:
【参考方案6】:我会说添加一个带有句点的段落 并像这样设置样式:
<p class="center">.</p>
<style>
.center font-size: 0px; margin-bottom: anyPercentage%;
</style>
你可能需要玩弄百分比才能让它正确
【讨论】:
你可以在 中使用它。 Margin-Bottom 假设您将它放在 div 组件的第一个位置。 不是我所说的responsive
,因为它会被硬编码。也许calc()
可以在这里提供帮助,但是说anyPercentage%
根本不是解决方案。以上是关于如何垂直对齐到具有定义宽度/高度的 div 内容的中心?的主要内容,如果未能解决你的问题,请参考以下文章