Html ：：在可变高度div中垂直对齐之前

我有一个下拉框，其中包含可选文本和一个伪按钮（只是一个图像，整个框可以单击以下拉内容）。整个页面的HTML如下所示：

<div class= "btn-group dropdown" datatype = "responses" datadrop = 0>
    <a class = "dropdown-toggle btn" data-toggle = "dropdown">
        <i class = "sort">
            ::before
        </i>
    </a>
</div>

我意识到-100%的垂直对齐有点便宜，但它成功地使伪按钮垂直居中（垂直对齐：中间什么也没做）

在用户填充下拉框之前，此代码工作得非常好，此时总高度发生变化，并且伪按钮的垂直对齐关闭

---

有什么建议吗？

您是否尝试使用以下方法垂直对齐：

{
height:40px; /*add your own*/
width:200px; /*add your own*/
position:absolute;
top:0;
bottom:0;
margin:auto;
}

PS：如果您没有预定义的宽度和高度，请按如下方式操作：

{
height:auto;
width:auto;
display:table;
position:absolute;
top:0;
bottom:0;
margin:auto;
}

---

这似乎应该行得通，但行不通（定义宽度和高度没有任何作用，但设置“位置：绝对”特性似乎会使我的“顶部”、“底部”等字段更具延展性）。我已经将您的建议与在中找到的一些建议结合起来，现在我的页面看起来像是我想要的。原来垂直对齐没有像我预期的那样工作，我需要将“位置：绝对”与“顶部”结合起来以获得预期的行为。我明白了，我很高兴它能为你工作^^对不起，我不能尽快回复，我不在。另外，如果我没有所有的css，你的代码很难调试。但如果结局好，一切都好。

{
height:auto;
width:auto;
display:table;
position:absolute;
top:0;
bottom:0;
margin:auto;
}