垂直和水平居中的視差網站

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

請參閱下面的引導代碼。中間一列包含主要信息。並且每個「部分」都假設分別以整頁爲中心。假設它像一個視差滾動網站，每個部分的背景都沒有變化，而是滾動時物體會出現並消失。

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％，並添加紅色/綠色/藍/等分部分（重新添加背景顏色）。

Answer 2

添加一個額外的div像這樣：

<div class="tc"> 
    <div id="xyz"> 
    <h1>Fit</h1> 
    <p>width and height</p> 
    </div> 
</div> 

和CSS：

#xyz { 
    display: inline-block; 
    text-align: left; 
} 

FIDDLE