html - CSS 中垂直对齐的问题

Question

简而言之，我无法让我的内容 div 在页面内垂直对齐 - 有人告诉我，为了让它工作，我的容器必须有一个不是自动的高度值，所以我去修复了它，但它仍然无法正常工作，有人可以帮助我吗？

HTML

<div class="units-container" style="overflow: hidden;">
    <div id="home" class="section">
        <div id="home-content">
            <section id="intro">
                <section>
                    <h3>Lorem Ipsum Dolor Amet (and some other latin things too)</h3>
                </section>
        </div>
    </div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="blog"></div>
    <div id="contact"></div>
</div>

CSS

#home {
    background-color: #1a1a1a;
    color: #fff;
}
.section {
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
}
#home #home-content {
    vertical-align: middle;
    text-align: center;
}
#intro {
    width: 60%;
    margin: 0 auto;
}
#home-content h3 {
    font-family:'amblelight_condensed', 'Courier';
    display: block;
    color: #fff;
    font-size: 2.17em;
    line-height: normal;
}

JQuery(如果需要)

jQuery(document).ready(function ($) {

    /*--------------------------
    Resize Div(s) when Window Resizes
    ---------------------------*/

    $(".section").css("height", $(window).height());
    $(".section").css("width", $(window).width());
    $(window).resize(function () {
        $('.section').css('height', $(window).height());
        $(".section").css("width", $(window).width());
    });
});

http://jsfiddle.net/sWeLw/

Answer 1

相对于您的样本。添加以下 CSS:

#home, #home-content {position:relative;}

和JS:

$('#home-content').css("top", ($('#home').height() - $('#home-content').height()) / 2);