在<DIV>中垂直居中文本
我有一个固定高度的<div>元素，我想在该元素中垂直居中放置一些文本。
我一直在尝试遵循http://phrogz.net/css/vertical-align/index.html上的说明。 但是，它似乎并不适合我。
我在http://jsfiddle.net/scwebgroup/74Rnq/发布了我正在尝试的内容。 如果我将HeaderBrand的margin-top更改为-22px左右，那看起来是正确的。
任何人都可以看到为什么文章中描述的技术没有按照我的预期工作？
注意：这里的最佳答案仅适用于文本未换行到第二行的情况。
这个：
<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>
可以在现代浏览器中使用，而不管文本是否跨越一行或多行。
还更新了小提琴在http://jsfiddle.net/74Rnq/135/不知道你在做什么与左边的625px的边缘，当事情本身只有150px宽...通过删除内联样式整理了一些东西并使用一些填充以及。
你可以尝试将line-height设置为div的高度，如下所示：
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div>
这是另一种似乎可行的技术：
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
}
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>
我知道这种方法增加了一些HTML，但它似乎适用于所有主流浏览器（甚至IE7 +）。
基本的HTML结构
<div id="hold">
<div>Content</div>
<div class="aligner"> </div>
</div>
需要CSS
#hold{
height:400px;
}
div{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;
}
.aligner{
width:0px;
height:100%;
overflow:hidden;
}
jsFiddle
链接地址: http://www.djcxy.com/p/41645.html