水平方向と垂直方向のセンタリングを同時に実現するCSSの5つのアイデアを詳しく解説

以下のエディターは、CSS を使用して水平方向と垂直方向の中央揃えを同時に実現するための 5 つのアイデアの簡単な分析を提供します。編集者はそれがとても良いと思いますので、参考にしてみましょう。この記事では、水平方向と垂直方向の中央揃えについて 5 つのアイデアを紹介します。

アイデア 1: text-align + line-height単一行テキストの水平方向と垂直方向の中央揃えを実現する

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

XML/HTML コード

にコンテンツをコピーします。クリップボード

1. p class="test" style="背景色: ライトブルー;幅: 200px;" >テストテキストp>

アイデア2:

text-align + vertical-align【1 】テキスト整列を設定し、親要素にvertical-alignを設定し、親要素をtable-cell要素、子要素をinline-block要素に設定します

【注意】IE7対応ブラウザの場合は、 table-cell の効果を実現するには構造体を 構造体に変換します。 inline-block の効果を実現するには

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【2】子要素がimage、table-cell は使用できませんが、その親要素は高さの代わりに行の高さを使用し、フォント サイズは 0 に設定されます。子要素自体にvertical-alignを設定する: middle

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child lazy"  src="/static/imghwm/default1.png"  data-src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif"       style="max-width:90%" alt="test">
</p>

3つのアイデア:

margin +vertical-align 親要素にvertical-alignを設定するには、 に設定する必要があります。 table-cell element ; margin:0 auto でブロック要素の内容を水平方向に中央揃えにして幅を拡張したい場合は、これを table 要素に設定する必要があります。 table 要素は、table がセル内にネストできるのと同じように、tabel-cell 要素内にネストできます [注] IE7 ブラウザと互換性がある場合は、構造を

構造に変更する必要があります。

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

アイデア4:

絶対配置

を使用する【1】絶対配置要素のボックスモデル機能を使用し、オフセット属性

に基づくマージンを設定する決められた値: auto

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【2】絶対配置要素のoffset属性とtranslate()

関数の自己オフセットを利用して水平方向と垂直方向のセンタリング効果を実現

[注意] IE9 ブラウザはサポートしていません

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%,-50%);   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

[3] 子要素の幅と高さがわかっている場合、margin の負の値を使用して水平方向と垂直方向のセンタリング効果を実現できます

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

思考5:

flexを使う

【注意】IE9ブラウザはをサポートしていません【1】flexアイテムにはmargin:auto

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

を使用します

【2】フレックスコンテナで主軸配置の justify-content と交差軸配置の align-items を使用します

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

上記の記事では、水平方向と垂直方向のセンタリングを同時に実現するための CSS の 5 つのアイデアを簡単に分析しています. これは編集者が共有したすべての内容ですので、参考にしていただければ幸いです。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

以上が水平方向と垂直方向のセンタリングを同時に実現するCSSの5つのアイデアを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。