DIVまたはDIVで画像を水平方向と垂直方向に中央揃えする方法

<div class="box">
  <画像 />
</div>

水平方向に中央揃えする一般的な方法:

text-align:center ——これにより、サブ要素のフォントと画像を水平方向に中央揃えできます。

margin:0 auto - これはブロック要素の水平方向の中央揃え方法です

垂直方向に中央揃えする一般的な方法:

vertical-align: middle;—この垂直中央揃えプロパティは、インライン要素またはインラインブロック要素に対してのみ有効です。

flexの垂直センタリングの使用はここでは考慮されません

div 内で画像を水平方向と垂直方向に中央揃えする方法:

最初の方法: 直接手動で計算します。ボックスの高さと画像の高さを知る

。箱{
    幅: 300ピクセル;
    高さ: 300px;
    境界線: 1px 実線の赤;
    テキスト配置: 中央;
}
画像{
    幅: 80ピクセル;
    高さ: 80px;
    パディング上部: 110px;
}

注: この方法は、ボックスの高さから画像の高さを引いて、それを 2 で割ります。これが padding-top の値です。もちろん、margin-top を使用することもできます。これにより、div 内の画像を垂直方向に中央揃えすることもできます。テキストを水平方向に中央揃えにするには、text-align: center; を使用します。

2番目の方法：画像の幅と高さがわかっている

 画像{
     位置:相対;
     上位:50%;
     残り:50%;
     上余白: ネガティブ画像の高さの半分。
     左余白: ネガティブ画像の幅の半分。
   }

3 番目の方法: 画像の幅と高さは不明で、ボックスの高さは固定することが望ましいです。

画像{
    位置: 相対的;
    上位: 50%;
    左: 50%;
    変換: translate(-50%,-50%);
}

注意: 固定されておらず、高さが適応型の場合、画像はおそらく div より少し上に移動されます。 CSS3 を使って水平方向と垂直方向の中央揃えを実現する方法です。もちろん互換性があればですが、transform がサポートされていない場合はこの方法はサポートされません。

4 番目の方法: ボックスをセルとして扱います。ボックスの幅と高さを設定する必要はなく、画像が自動的に拡大されるようにします。このようにして、ボックスの幅と高さは固定されることが望ましい。もちろん固定しなくても効果は得られます。

。箱{
    幅: 300ピクセル;
    高さ: 300px;
    垂直位置合わせ: 中央;
    テキスト配置: 中央;
    表示: テーブルセル;
    境界線: 1px 実線の赤;
}

注意: display: table-cell は、ラベル要素をセルとして扱うことと同じです。唯一の欠点は、IE6/7 と互換性がないことです。

5 番目の方法: テーブルを使用して、水平および垂直の中央揃えの効果を実現します。テーブルの幅と高さは分かっている

html:

 <テーブルクラス="img_meng_show">
   <tr>
     <td>
        <画像ソース="">
     </td>
   </tr>
 </テーブル>

css:

 .img_meng_show td{
   垂直位置合わせ: 中央;
    テキスト配置: 中央;
 }

DIV を水平方向と垂直方向に中央揃えする方法:

最初の方法:

HTML:

<div class="box">

css:

  。箱{
    position:absolute (または fixed);
    トップ:0;
    左:0;
    下:0;
    右:0;
   マージン:自動;
    幅:100ピクセル;
    高さ:200px;
 }

これにより、div の垂直方向と水平方向の中央揃えを実現できますが、必要な条件として、幅と高さを追加し、余白も追加する必要があります。画像を水平方向と垂直方向に中央揃えにしたい場合は、上記のように margin-left を使用できます。

垂直方向に中央揃えしたいだけの場合は、top と bottom を使用し、margin:auto 0; を指定します。

同様に、水平方向に中央揃えにしたい場合は、top と bottom を使用し、margin: 0 auto; とします。

ただし、この方法は IE8 以下をサポートしていません。

2番目の方法:

CSS3 の translate メソッドを使用すると、div を垂直方向と水平方向に中央に配置することもできます。

。箱{
    位置: 固定 (または絶対)。
    上位: 50%;
    左: 50%;
    幅: 100ピクセル;
    /*height: 100px;*/高さは固定できます background: skyblue;
    変換: translate(-50%,-50%);
}

divの中にdivがある場合、つまり

<div class="out">
    <div class="in"></div>
</div>

この構造は、div 内で画像を水平方向と垂直方向に中央揃えする方法を参考にして実現することもできます。ブロック要素を水平方向に中央揃えするだけの場合は、text-align: center; を margin: 0 auto; に置き換える必要があります。

要約する

上記は、私が紹介した DIV または DIV 内の画像を水平方向と垂直方向に中央揃えする方法です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。