具有行高和未指定高度的 div 垂直对齐答案

【问题标题】：Vertical alignment of divs with line-height and unspecified height具有行高和未指定高度的 div 垂直对齐
【发布时间】：2014-03-04 16:45:30
【问题描述】：

我正在尝试使用 line-height 将 div 垂直居中，而不为 line-height 指定设置的像素值。我需要将 line-height 扩展到它的 div 的大小。使用 '100vh' 有效，但视口单元没有得到足够广泛的广泛支持。将 line-height 设置为 100% 似乎不起作用。这是我的 HTML：

<div class="background">

<div class="lightboxbg">
    <div class="wrapper">
    <div class="centerme"></div>
    </div>
</div>
    
</div>

还有我的 CSS：

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.background {
    width: 90%;
    height: 100%;
    background-color: AntiqueWhite;
}

.lightboxbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    vertical-align: middle;
    text-align: center;
}

.wrapper {
    vertical-align: middle;
    line-height: 100%;
    height: 100%;
    width: 100%
}

.centerme {
    vertical-align: middle;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

And here's a jsfiddle. 如果我可以将包装器的行高扩展到包装器的高度，蓝色框将居中，但我不知道该怎么做。感谢阅读。

编辑：查看 Nathan Lee 的关于表格单元的解决方案的答案，Fredric Fohlin 的一个非常狂野的“绝对定位”答案，以及 MM Tac 的使用绝对定位的解决方案。

【问题讨论】：

标签： html vertical-alignment centering css

【解决方案1】：

给你。

WORKING DEMO

CSS 变化：

.lightboxbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    vertical-align: middle;
    text-align: center;
    display: table;
}

.wrapper {
    vertical-align: middle;
    line-height: 100%;
    height: 100%;
    width: 100%;
    display: table-cell;
}

希望这会有所帮助。

【讨论】：

很好，这看起来很简单，绝对有帮助。

【解决方案2】：

看看这个想法。它可能适合你：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

.Center-Container { 
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

在您的情况下，包装器需要相对定位，而“居中”则需要绝对定位。

【讨论】：

这很酷，我还没有在我目前的小提琴上工作，但我还在玩。
好的，我阅读了您的其他 cmets，我想我需要澄清“居中我”元素需要设置高度。如果元素没有高度，则它与父元素的高度相同。

【解决方案3】：

将.centerme替换为以下css：

CSS：

.centerme {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px; /* negative-half of element's width*/
    margin-top: -50px; /* negative-half of element's height*/
}

这里是DEMO，这里是整页RESULT。

更新

将可变长度的 div 居中很简单，只需从 .centerme css 中删除 height、width、margin-left、margin-top 引用即可。

.centerme {
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
}

这是UPDATED DEMO。

【讨论】：

这是一个有用的解决方案，不幸的是我的 centerme 对象将具有可变的高度和宽度，我只是以 100px 为例。不过，它可以用 jQuery 来完成。
啊酷，没想到。唯一的问题是，它垂直居中完美但水平居中，因为它从 div 的一开始就向左测量 50%。顺便感谢您的帮助。
是的，您可以按照 Nathan Lee 的回答使用。