Question

I know vertical center in CSS is a pain to begin with, but I’ve just made it a bit more complicated. On my page, I have:

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

It’s for a basic task list. Tasks are added to the incomplete ul, and when completed move to the complete ul. What I want to do via css is have the text field vertically centered on the page and stay there, with the two lists butted up against it. I’ve been looking at all sorts of vertical alignment (a summary of forms found here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ ) but I can’t seem to find a way that I can figure out how to adapt to allow what I need. How would I accomplish this style of fixed position centering?

EDIT:
Here’s an image of what I’m looking for: https://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png

Answer 1

I can’t think of any way to do this with CSS, but it’s fairly easy to do with JavaScript/jQuery. Here is a working jsFiddle that does what you want on document load. You’d call the code again if you changed the lists, of course.

First, you enclose your lists and form in a div. I called this id=”cmiddle”. Then you use CSS to set the cmiddle div as position: relative. Then you use JavaScript code to get the enclosing window or frame height, calculate the center for the form, and then, subtract the upper list height to get the correct div position:

$(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);
});

Edit: Kraz was nice enough to add a simulation of adding list items to both lists and calling the code again to recalc. His jsFiddle here.