div 内の可変の幅と高さでテキストを垂直方向に中央揃えにする 3 つの方法

インタビュー中に質問されました: 幅と高さが可変のテキストを垂直方向の中央に配置するにはどうすればよいですか?

ここで要約します:

ボディに構造体を記述します

main">

djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.

方法 1:

#main{
position:relative; //親要素内で相対を使用位置決め
幅: 200px;
高さ: 200px;
オーバーフロー: 非表示;
背景色: #ff0;
パディング: 10px;
}
#login{
位置: 絶対; /*絶対位置を使用します*/
top:50%; color: #eee;

-webkit-transform:translate(-50%,-50%); /*CSS3 スタイル, :translate(-50%) ,-50%)、X 軸と Y 軸からの距離に相対 - 50%*/

}方法 2:

#main{
width: 200px;
height: 200px;

background-color: #eee;

display

: table; /*ラベル要素を
table
の形式で表示します。 /* ie7 と ie6 は両方ともディスプレイを認識できません。 table-cell;*/

vertical-align: middle;}

以上がdiv 内の可変の幅と高さでテキストを垂直方向に中央揃えにする 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。