CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に多かれ少なかれ遭遇するでしょう。今日は、CSS を使用して垂直方向と水平方向に中央揃えするいくつかの方法について記事を書きます。

例1: 最も単純な水平方向の中央揃えから始める

マージン: 0 自動;

ブロックレベル要素は、margin: 0 auto; を使用して親要素の中央に配置できますが、ブロックレベル要素の幅と高さを設定することを忘れないでください。 HTML部分

<div class="wrap">
  <div class="example1">
    <p>CSS</p>
  </div>
</div>

CSS部分

.例1 {
  幅: 200ピクセル;
  高さ: 200px;
  背景色: オレンジ;
}
.example1 p {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
  マージン: 0 自動;
  行の高さ: 100px;
  テキスト配置: 中央;
}

例2: 要素を水平方向と垂直方向に中央揃えする

既知の幅を持つ位置要素絶対位置 + マージン逆オフセット

.wrap { position: relative; background-color: orange; width: 300px; height: 300px; } .example2 { background-color: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }

位置変換要素の幅が不明な場合、要素の幅が不明な場合は、上記の例2の margin: -50px 0 0 -50px ; を次のように置き換えます: transform: translate(-50%,-50%) ;

例3: フレックスレイアウト

HTMLは上記と同じですが、CSSコードが添付されています

.warp {
  背景色: #FF8C00;
  幅: 200ピクセル;
  高さ: 200px;
  ディスプレイ: フレックス;
  justify-content: center; /*サブアイテムを水平方向に中央揃えにする*/
  align-items: center; /*サブ項目を垂直に揃える*/
}
.例3 {
  背景色: #F00;
  幅: 100ピクセル;
  高さ: 100px;
}

もう 1 つはテーブルセルレイアウトですが、紹介したくないのでここでは紹介しません。

例4: 絶対レイアウト

div には絶対レイアウトを使用し、margin:auto; を設定し、上、左、右、下の値が等しくなるように設定します。すべて 0 である必要はありません。 HTML部分

<div class="warp">
  <div class="example3">
    センターディスプレイ</div>
</div>

CSS部分

.warp {
  位置: 相対的;
  背景色: オレンジ;
  幅: 200ピクセル;
  高さ: 200px;
}
.例3 {
  位置: 絶対;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  背景色: 赤;
  幅: 100ピクセル;
  高さ: 100px;
  マージン: 自動;
}

例5: 子要素の相対的な配置とtranslaY()による垂直方向の中央揃え

.warp {
  位置: 相対的;
  背景色: オレンジ;
  幅: 200ピクセル;
  高さ: 200px;
}
.例3 {
  位置: 相対的;
  上位:50%;
  変換:Y座標を-50%に変更します。
  背景色: 赤;
  幅: 100ピクセル;
  高さ: 100px;
  マージン: 0 自動;
}

例6: inline-blockのvertical-align: middleを使用して、after疑似要素を配置する

inline-block の vertical-align:middle を使用して after 疑似要素を配置すると、より良い結果が得られます。中央揃えのブロックのサイズは、コンテンツに合わせて折り返して適応することができ、互換性も非常に良好です。欠点は、水平方向の中央揃えでは、インラインブロック間隔内の空白を考慮する必要があることです (コードの改行に関する従来の問題)。

.warp {
    テキスト配置: 中央;
    オーバーフロー:自動;
    幅: 200ピクセル;
    高さ: 200px;
    背景色: オレンジ;
}
.例3 {
    表示: インラインブロック;
    背景色: 赤;
    垂直位置合わせ: 中央;
    幅: 100ピクセル;
    高さ: 100px;
}

.warp:after {
    コンテンツ： '';
    表示: インラインブロック;
    垂直位置合わせ: 中央;
    高さ: 100%;
    左マージン: -0.25em;
    /* 間隔をオフセットします。フォントによって異なる場合があります */
}

例7: display: flex-box

フレックスボックスレイアウト。これは、あらゆる種類のレイアウトと配置の問題を解決するために特別に設計された究極のレイアウト方法です。利点: さまざまな配置やレイアウトの問題を解決できます。

.warp {
  ディスプレイ: -webkit-flex;
  ディスプレイ: -moz-box;
  ディスプレイ: -ms-flexbox;
  ディスプレイ: -webkit-box;
  ディスプレイ: フレックス;
  -webkit-box-align: 中央;
  -moz-box-align: 中央;
  -ms-flex-align: 中央;
  -webkit-align-items: 中央;
  アイテムの位置を中央揃えにします。
  -webkit-box-pack: 中央;
  -moz-box-pack: 中央;
  -ms-flex-pack: 中央;
  中央揃え
  コンテンツの中央揃え: 中央;
  幅: 200ピクセル;
  高さ: 200px;
  背景色: オレンジ;
}
 
.例3 {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 赤;
}

写真中央の例1:

<div class="warp">
  <div class="example3">
    <img src="xxxx" alt="">
  </div>
</div>
.warp {
  幅: 200ピクセル;
  高さ: 200px;
  背景色: オレンジ;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}
.example3 画像 {
  幅: 100ピクセル;
  高さ: 100px;
  背景色: 青;
}

要約する

これで、CSS3 で水平中央揃え、垂直中央揃え、水平および垂直中央揃えを実装するサンプルコードに関するこの記事は終了です。CSS3 垂直中央揃えに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vueプロジェクトでページジャンプを実装する方法

>>: Webデザインにおけるフォームデザインテクニックのまとめ