在Div中添加表单时，垂直对齐不起作用

Question

我（绝望地）试图在div的中间垂直对齐（中间）一个表单。我只是无法让它全部工作，所以我只是回到基础，并在一个div中间垂直居中：

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
</div>

这非常有效。我认为表单的行为会相同，但是当我添加它时会得到一些非常奇怪的结果：

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
    <form style='display: inline-block; vertical-align: middle;'>
        <label>Add Something:</label>
        <input type='text' value='nothing in there'/>
    </form>
</div>

正如您所看到的，文本相对于蓝色框而不是表单是居中的。更糟糕的是，不在表单中添加vertical-align：middle实际上是在改变文本的位置（绿色框）

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
    <form style='display: inline-block;'>
        <label>Add Something:</label>
        <input type='text' value='nothing in there'/>
    </form>
</div>

我迷路了。请帮忙！

Answer 1

我实际上最终将表单嵌入到绿色框中，将表单声明为表格单元格并垂直居中。它似乎有效：

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>
        <form style='display: table-cell; vertical-align:middle;'>
            <label>Add Something:</label>
            <input type='text' value='nothing in there'/>
        </form>
    </div>
</div>