html - 视差站点垂直和水平居中

Question

我正在尝试做一个视差网站，并试图让我的内容垂直和水平居中，但左对齐。

参见 jsFiddle:http://jsfiddle.net/B3nxK/37/

HTML:

    <div class="container box">    
        <div class="anchor" id="fit"></div>
        <div class="section fit red">
            <div class="t">
                <div class="tc">
                     <h1>Fit</h1>
                    <p>width and height</p>
                </div>
            </div>
        </div>
        <div class="section fit green">
            <div class="t">
                <div class="tc">
                     <h1>Fit</h1>
                    <p>width and height</p>
                </div>
            </div>
        </div>
    </div>


Thanks in advance.


EDIT
--

请参阅下面的 Bootstrap 代码。中心栏包含主要信息。并且每个“部分”都应该单独以整页为中心。它应该像一个视差滚动网站，每个部分的背景都不会改变，而是对象在滚动时出现和消失。

HTML:

            <div class="row vertical-align">

                <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 left-col">
                </div>

                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 content">
                    <div id="menu" style="background-color:red">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="columnone" style="background-color:green">
                                <p class="categories">STARTERS</p>

                                <p class="names">BARRAMUNDI</p>
                                <p class="description">Atus alitatur magnatquos aut estiisc idebit, od quis volorporem. Se cus repelliquae mo consed mod ut adicabo ribusciam ipsumquas</p>
                                <p class="cost">-45</p>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="columntwo" style="background-color:blue">
                                <p class="categories">MAINS</p>

                                <p class="names">BARRAMUNDI</p>
                                <p class="description">Atus alitatur magnatquos aut estiisc idebit, od quis volorporem. Se cus repelliquae mo consed mod ut adicabo ribusciam ipsumquas</p>
                        <p class="cost">-45</p>
                    </div>    
                </div>
            </div>
</div>

        <div id="about" style="background-color:yellow">
            <p class="about_header">OUR RESTAURANT</p>
            <p class="about_info">Uptatio. Ulparumet fugitatibus, occusda cum fuga. Et esed quam ipid ut eum si am re desedis. Ommolum faciet imporep erepudae vel in el mil iliquo blautatur, aut officipis ium venis dolupta que possimo esti ut vellaut et restis adit latem sam, odit perum landit doles aute sanis estempos eos et que omni tetus ea peditatur.</p>
        </div>

        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 right-col">     
        </div>

    </div>

CSS:

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body{
    background: url(../assets/background.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    background-size: cover;
}

.row{
    margin-right:0;
    margin-left:0;
}

Answer 1

这是一种方法...

您可以将您的内容从“部分”移动到新的“子部分”，然后将“部分”宽度设置为 80%，并向子部分添加红色/绿色/蓝色/等(以重新添加背景颜色)。