在HTML中垂直居中文本的問題

Question

我明白這種類型的問題已經發布很多次了，但我似乎無法弄清楚我的問題是什麼。我有一段文字，我想將它垂直居中在頁面的左側。我不想用沉重的填充來使文字居中。如果訪問者隨窗口高度變化，我希望它垂直居中。

我有一個文本塊：

<div class="welcome"> 
    <p>Testing Stuff</p> <br /> <br /> 
    <p>Testing Stuff</p> <br /> <br /> 
    <p>Testing Stuff</p> <br /> <br /> 
    <p>Testing Stuff</p> 
</div> 

這裏是CSS的歡迎

.welcome { 
position: absolute; 
top:50%; 
display: table; 
vertical-align: middle; 
padding-left: 50px; 
font-family: 'Helvetica-Light'; 
font-size: 40px; 
} 

.welcome p{ 
display: inline; 
vertical-align: middle; 
padding: 10px; 
background: black; 
color: white; 
opacity: 0.7; 
white-space: nowrap; 
} 

目前最頂級的50％將開始在50％的文字，但我需要的文本塊的中心爲50％，而不是從50％開始。

請幫忙。

Answer 1

仍在檢查了這一點，但這裏有一個方法：

HTML

<div class="welcome"> 
    <div class="row"> 
     <p>Testing Stuff</p> 
     <p>Testing Stuff</p> 
     <p>Testing Stuff</p> 
     <p>Testing Stuff</p> 
    </div> 
</div>​ 

CSS

html, 
body { 
    height: 100%; 
    width: 100%; 
} 
.welcome { 
    height: 100%; 
    width: 1px; 
    display: table; 
    padding-left: 50px; 
    margin: auto; 
    font-family: 'Helvetica-Light'; 
    font-size: 30px; 
} 
.welcome .row { 
    display: table-cell; 
    white-space: nowrap; 
    vertical-align: middle; 
} 
.welcome .row p { 
    display: table-cell; 
    padding: 10px; 
    background: black; 
    color: white; 
    opacity: 0.7; 
}​ 

注意在html, body線路上使用的100%，它允許你在.welcome元素上使用margin: auto和height: 100%。我固定白色間隙（由於display: table-cell塊內解釋了「空白」，即，那些p標籤是在單獨的行，因此間隙。

http://jsfiddle.net/userdude/CuUgV/3/

Answer 2

我這樣做了一些jQuery的，希望這是你想要什麼：FIDDLE

HTML：

<div class="welcome"> 
    <div class="container"> 
     <p>Testing Stuff</p> <br /> <br /> 
     <p>Testing Stuff</p> <br /> <br /> 
     <p>Testing Stuff</p> <br /> <br /> 
     <p>Testing Stuff</p> 
    </div> 
</div>​ 

CSS：

.welcome { 
    position: absolute; 
    padding-left: 50px; 
    font-family: 'Helvetica-Light'; 
    font-size: 40px; 
    height: 100%; 
} 

.welcome p{ 
    display: inline; 
    vertical-align: middle; 
    padding: 10px; 
    background: black; 
    color: white; 
    opacity: 0.7; 
    white-space: nowrap; 
} 

.container { 
    position: absolute; 
    top: 50%; 
}​ 

JS：

$(function() { 
    var containerHeight = $('.container').height(); 
    $('.container').css({'margin-top': -containerHeight/2}); 
});​ 

UPDATE沒有jQuery的：FIDDLE