この問題について話すとき、CSS には垂直方向の中央揃えを設定するvertical-align 属性はないのかと疑問に思う人もいるかもしれません。一部のブラウザがサポートしていない場合でも、CSS Hack 技術を少し行うだけで済みます。ここで少し言っておきますが、CSS には確かにvertical-align 属性がありますが、これは (X)HTML 要素の valign 属性を持つ要素 (table 要素の
など) にのみ有効です。 、 などの要素には valign 属性がないため、vertical-align は機能しません。
ヒント: 完璧な解決策は記事の最後にあります。
1. 単一行の垂直方向の中央揃え
コンテナ内にテキストが 1 行しかない場合、テキストを中央に配置するのは比較的簡単です。実際の高さを行の高さと同じに設定するだけです。
リーリー
このコードは非常に単純で、overflow:hidden 設定は、コンテンツがコンテナーを超えたり、自動行折り返しが発生したりしないようにするために後で使用され、垂直方向のセンタリング効果が得られません。
リーリー
2. 高さが不明な複数行のテキストの垂直方向の中央揃え
コンテンツの高さが可変の場合、前のセクションで説明した最後の方法を使用して、水平方向のセンタリングを実現できます。これは、上部と下部のパディング値が同じになるようにパディングを設定することです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを 内に完全に埋める方法にすぎません。次のようなコードを使用できます:
リーリー
このメソッドの利点は、どのブラウザでも実行でき、コードが非常にシンプルであることですが、このメソッドを適用するための前提条件は、コンテナの高さがスケーラブルである必要があることです。
リーリー
3. 複数行テキストの固定高さ中央揃え
この記事の冒頭で、CSS のvertical-align 属性は valign 属性を持つ (X)HTML タグでのみ機能すると言いましたが、CSS には をシミュレートできる display 属性もありますので、この属性を使用すると、vertical-align を使用して をシミュレートできます。 display:table と display:table-cell を使用する場合、前者は親要素に設定する必要があり、後者は子要素に設定する必要があるため、テキストに別の 要素を追加する必要があることに注意してください。配置する必要があります:
リーリー
リーリー
この方法が理想的なはずですが、残念ながらInternet Explorer 6はdisplay:tableとdisplay:table-cellを正しく理解できないため、この方法はInternet Explorer 6以下では無効です。まあ、それは憂鬱です！しかし、私たちには他の選択肢もあります。
4. Internet Explorer での解決策
Internet Explorer 6 以下では、高さの計算に不備があります。 Internet Explorer 6で親要素を配置した後、子要素に対してパーセント計算を行うと計算根拠が引き継がれるようです（位置決め値が絶対値であればそのような問題はありませんが、パーセント計算基準を使用するとこれは要素の高さではなく、親要素から継承された配置の高さになります)。
たとえば、次の (X)HTML コード スニペットがあります:
リーリー
サブラップを絶対に配置すると、コンテンツもこの属性を継承しますが、ページ上にすぐには表示されませんが、その後コンテンツを相対的に配置すると、使用した 100% の比率が元の高さではなくなります。内容の。たとえば、サブラップの位置を 40% に設定した場合、コンテンツの上端をラップと一致させたい場合は、top:-80% を設定する必要があります。 、コンテンツを元の位置に戻すには 100% を使用する必要がありますが、コンテンツも 50% に設定するとどうなるでしょうか。そうすれば、正確に垂直方向の中央に配置されます。したがって、この方法を使用して Internet Explorer 6 で垂直方向の中央揃えを実現できます。
リーリー
もちろん、このコードは Internet Exlporer 6 などのコンピューティングの問題があるブラウザでのみ機能します。 （でも、わかりません。たくさんの記事を調べました。ソースが同じだからなのか、何らかの理由でそうなったのかはわかりません。インターネット上では、このバグの原理を説明したくない人が多いようです） Exlorer 6. 表面的にしか理解していません。さらに勉強する必要があります)
リーリー
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
ログイン後にコピー
至此，一个完美的居中方案就产生了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><br /> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}<br />
| 
