Html 垂直对齐不'；当表单添加到Div中时，将无法工作 我拼命地试图在一个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>

文本
添加一些内容：

如您所见，文本相对于蓝色框居中，而不是表单居中。更糟糕的是，不在表单中添加垂直对齐：中间实际上改变了文本的位置（绿色框）

文本
添加一些内容：

---

我迷路了。请帮忙

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

<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>

添加一些内容：

---

请注意：边框：

1纯蓝色

应该是

border:1px纯蓝色

。这是因为无论何时在css中指定宽度（与过时的宽度和高度属性相反），都必须指定单位（px、em、es、ex、rem等）。唯一的例外是，如果将值设置为0，则不需要单位。是的，谢谢。碰巧在Safari上，默认情况下它使用px（还有一些其他的，例如…）。这是我调试时的一个坏习惯。但评论不错。

<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>