如何垂直对齐到具有定义宽度/高度的 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 内容的中心?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据子 SVG 内容对齐父 div 高度

如何在具有百分比高度的div中间垂直对齐文本? [复制]

垂直对齐内容

垂直对齐具有高度自动和最小高度设置的父级中的div?

div中的垂直对齐div [重复]

具有动态宽度和高度的垂直和水平中心块