Html 带线高和未指定高度的DIV垂直对齐

我尝试使用线高度垂直居中div，而不为线高度指定设置的像素值。我需要将行高度扩展到其div的大小。使用“100vh”可以工作，但视口单元的支持不够广泛。将线条高度设置为100%似乎不起作用。这是我的HTML：

<div class="background">

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

如果我能让包装的行高扩展到包装的高度，蓝色的盒子就会居中，但我不知道如何去做。谢谢你的阅读

---

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

看看这个想法。它可能适合你：

---

在你的例子中，包装器需要相对定位，“居中”是绝对定位。

看看这个想法。它可能适合你：

---

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

用以下css替换

.centerme

：

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*/
}

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

这是一个，这是一个完整的页面

更新

要使可变长度的div居中很简单，只需从

.centerme

css中删除

高度

，

宽度

，

左边距

，

边距顶部

参考即可

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

---

以下是一个。

用以下css替换

.centerme

：

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*/
}

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

这是一个，这是一个完整的页面

更新

要使可变长度的div居中很简单，只需从

.centerme

css中删除

高度

，

宽度

，

左边距

，

边距顶部

参考即可

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

这是一个。给你

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*/
}

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

希望这有帮助。

给你

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*/
}

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

---

希望这能有所帮助。

这太酷了，我还没有让它在我现在的小提琴上工作，但我还在玩。好的，我读了你的其他评论，我想我需要澄清一下，“中间我”元素需要设置一个高度。如果元素没有高度，它将与父元素的高度相同。这很酷，我还没有让它在我当前的小提琴上工作，但我仍然在玩。好的，我阅读了你的其他评论，我想我需要澄清“中间我”元素需要设置高度。如果元素没有高度，它将获得与父元素相同的高度。这是一个有用的解决方案，不幸的是，我的centerme对象将具有可变的高度和宽度，我只是以100px为例。不过，它可以通过jQuery来完成。啊，很酷，我没有想到这一点。唯一的问题是，它在垂直方向上完全居中，但在水平方向上却偏离了，因为它从div一开始就以50%的距离测量。顺便感谢您的帮助。是的，正如Nathan Lee所回答的那样，您可以使用它。这是一个有用的解决方案，不幸的是，我的centerme对象将具有可变的高度和宽度，我只是以100px为例。不过，它可以通过jQuery来完成。啊，很酷，我没有想到这一点。唯一的问题是，它在垂直方向上完全居中，但在水平方向上是偏离的，因为它从div一开始就测量到了50%的左侧。顺便感谢你的帮助。是的，正如Nathan Lee所回答的那样，你可以使用它。很好，这看起来很简单，很有帮助。很好，很简单，很有帮助。