Question

我正在尝试使用line-height垂直居中div，而不指定line-height的设置像素值。我需要将行高扩展到它的div的大小。使用'100vh'可以工作，但视口单元的广泛支持并不广泛。将行高设置为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用于绝对定位的解决方案。

Answer 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;
}

希望这有帮助。

Answer 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;
}

在你的情况下，包装器需要相对定位，“中心我”是绝对定位。

Answer 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设为可变长度非常简单，只需从height css中删除width，margin-left，margin-top，.centerme引用。

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

这是UPDATED DEMO。

div与行高和未指定高度的垂直对齐

3 个答案: