HTML中文本垂直居中的问题

我知道这类问题已经被贴了很多次了，但我似乎不知道我的问题是什么。我有一个文本块，我想在页面左侧垂直居中。我不想使用重填充来居中文本。如果访问者随窗口高度变化，我希望它垂直居中

我有一段文字：

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

当前顶部：50%设置文本从50%开始，但我需要文本块的中心设置为50%，而不是从50%开始

---

请帮忙。

我是用jQuery做的，希望这就是你想要的：

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

.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%;
}​

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

JS:

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

.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%;
}​

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

---

在不使用jQuery的情况下更新：

仍在检查，但有一种方法：

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

注意在

html，body

行上使用

100%

，这允许您在

上使用
边距：auto
和
高度：100%
。欢迎使用
元素。我修复了白色间隙（由于
display:table cell
块中解释的“空白”，即那些
p
标记位于单独的行上，因此间隙

标签的作用是什么？你能添加align:center for吗？欢迎你，看看它是否能在段落行之间起作用。我在文本上放了一个背景，我需要更多的空间，这样背景就不会重叠。有没有比标签更好的方法呢？好的，它在这把小提琴中居中，但还不太清楚：没有很好；这不仅仅是发布的内容（“单元格”之间的白色间隙），我也不太喜欢暂时的
div.row
存在。问题是，
display:table
方法需要额外的一层，以便
display:table cell
充当中间层（字面上和比喻上）代理。我还没有想出一个更优雅、更简洁的方法。jQuery？你不需要jQuery。只需设置页边空白，但这只是一个解决方案；）你能告诉我在哪里粘贴JS代码片段吗？我对所有这些网页内容都是新手，所以我甚至不知道该放在哪里。请将其包含在
：
中，然后放在
之后，或者放在文件的末尾：
[code-INSIDE]
。哦，来吧@ZacharyHunt不需要添加整个库和单独的代码来实现这一点。太过分了，伙计。但是，是的，这是一种方法<代码>：s