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上使用height属性！不要责骂我到很多）。但你明白了。

如果表的高度不知道也没有修复，但其父高已知，它将不起作用（see this example），你将不得不将其分解。

如果你根本不知道任何高度，那就很难对齐......

Further reading on vertical-align

Answer 2

我想不出用CSS做任何事情，但使用JavaScript / jQuery相当容易。这是一个working jsFiddle，可以在文档加载时执行您想要的操作。如果你改变了列表，你可以再次调用代码。

首先，您将列表和表单放在div中。我叫这个id =“cmiddle”。然后使用CSS将cmiddle div设置为position：relative。然后使用JavaScript代码获取封闭窗口或框架高度，计算窗体的中心，然后减去上面的列表高度以获得正确的div位置：

$(document).ready(function(e) {
    // To work with frames, too
    function getParentDocHeight($ele) {
        for (;;) {
            if (!$ele || !$ele.length) {
                return $(window).height();
            }
            $ele = $ele.parent();
            if ($ele.is("frame") || $ele.is("window")) {
                return $ele.height();
            }
        }
    }
    var $cm = $("#cmiddle");
    var formHeight = $("#new_item_form").outerHeight();
    var viewHeight = getParentDocHeight($cm)
    var formTop = (viewHeight - formHeight) / 2;
    var divTop = formTop - $("#complete").outerHeight();
    $cm.css("top", divTop);
});

编辑：Kraz非常好，可以添加一个模拟，将列表项添加到两个列表中，然后再次调用代码重新计算。他的jsFiddle here。

Answer 3

好吧，我不确定你在谈论什么

但一般来说，把line-height = div的高度。如有必要，我会围绕它创建一个div

如果是某些非常特殊的情况，我会做一些数学手动中心

因此，如果您想要居中1件事，请使用line-height = div的高度创建一个div 然后制作div位置：绝对，宽度，高度...... ....

希望这有帮助

表格周围的垂直中心页面

3 个答案: