HTML：
< div >
< p >
Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations….
</ p >
</ div >
* This source code was highlighted with Source Code Highlighter .
CSS：
div {
display: table-cell;
vertical-align: middle;
}
* This source code was highlighted with Source Code Highlighter .
そして本質的には、IE（7以下）に同じことを教えるだけでした。 本発明に至ったのは、表現を追加する、行の高さを操作する、テキストの後に空のインライン要素を挿入するなど、多くのひねくれた方法です。 また、他のブラウザーで上記のコードを使用してIE専用のメソッドを思いつきました。 そして、ここに私の方法があります：
HTML：
< div class ="b-width" >
< div class ="b-valign-middle" >
< div >
< p >
, . - . terran Canata , , , " " .
, . - . terran Canata , , , " " . - , . , zerg EffOrt SPL, . - , . </ p >
</ div >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
一般的なCSS：
.b-width {
width: 40%;
margin: 0 auto;
}
.b-valign-middle {
height: 500px;
border: 1px solid;
position: relative;
display: table-cell;
vertical-align: middle;
}
.b-valign-middle p {
border: 1px solid red;
}
* This source code was highlighted with Source Code Highlighter .
IE7以下のCSS：
.b-valign-middle div {
position: absolute;
top: 50%;
}
.b-valign-middle p {
position: relative;
top: -50%;
}
* This source code was highlighted with Source Code Highlighter .
実装例
少し説明しましょう：高さを示すコンテナは.b-valign-middleで、その中にdivとpでラップする未知のボリュームのコンテンツを中央に配置する必要があります（多くはセマンティクスの観点からはあまり言いませんが、それだけの価値はあります） ） 最初のラッパーはdivです。コンテンツの先頭をコンテナの中央に移動する必要があります（上部：50％）。 そして今、最も興味深いこと：2番目のラッパー-pは、最初のラッパーの高さの50％だけコンテンツを上げるために必要です。 （相対は機能しません）およびp top：-50％、それがすべてです！ とても簡単ですね。
さらに、この方法はIEでのみ機能します。通常のブラウザは、高さが明示的に指定されていないため、divの高さの50％だけpを上げませんが、今回はIEが驚きました。
まあ、それだけです。 この方法が誰かに役立つなら、私はそれを発明した最初の人ではないのと同じように、喜んでいます。 ブラウザでメソッドを確認しました：IE6 +、Opera 9.6、FF3.5、Chrome、Safari3。