javascript - 围绕表单垂直居中页面

Question

我知道 CSS 中的垂直居中开始时很麻烦，但我只是让它变得更复杂了一点。在我的页面上，我有:

<ul id="complete">
</ul>

<form id="new_item_form">
  <input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>

<ul id="incomplete">
</ul>

这是一个基本的任务列表。任务被添加到不完整的 ul，完成后移动到完整的 ul。我想通过 css 做的是让文本字段在页面上垂直居中并留在那里，两个列表靠在一起。我一直在研究各种垂直对齐方式(此处提供表格摘要:http://blog.themeforest.net/tutorials/vertical-centering-with-css/)，但我似乎无法找到一种方法来弄清楚如何适应我的需要。我将如何实现这种固定位置居中的风格？

编辑: 这是我正在寻找的图像:https://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png

Answer 1

Is this what you want to obtain ？

当然，我的代码有点粗略(在 tds 上使用高度属性!不要骂我太多)。但是你明白了。

如果表格的高度未知或固定，但其父级高度已知，则它将不起作用 (see this example)，您必须将其分解。

如果您根本不知道任何高度，则很难对齐...

Further reading on vertical-align