在 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;
}

目前 top: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;
}​

注意100% 在html, body 行上的使用，它允许您在.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