水平および垂直センタリング方法

今回は水平方向と垂直方向のセンタリングの方法について説明します。水平方向と垂直方向のセンタリングの注意点は何ですか?実際の事例を見てみましょう。

1. 要素をドキュメントフローの中央に配置する

方法 1: margin:auto メソッド

CSS コード:

p{
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

HTML コード:

<p>
   <img src="mm.jpg">
</p>

レンダリング:

いつだ要素

絶対配置 の場合、静的に配置されていない最初の祖先要素に基づいて配置されるため、ここでの img は外側の p に基づいて配置されます。

方法2: マイナスマージン法

CSSコード:

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

HTMLコード:

<p class="container">
    <p class="inner"></p>
</p>

レンダリング:

ここでは、まずtop:50%とleft:50%を使用して内側を作成します座標の原点 (左上隅) をコンテナの中心に移動し、負のマージンを使用して幅の半分だけ左にオフセットし、高さの半分だけ上にオフセットします。これにより、内側の中心点がコンテナの中心点とまったく同じです。

2. ドキュメントフローの外にある要素を中央揃えにする

方法 1: テーブルセルメソッド

CSS コード:

p{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

HTML コード:

<p>
    <img src="mm.jpg">
</p>

レンダリング:

p のvertical-align: middle は垂直方向の中央揃えを制御し、text-align: center は水平方向を制御します。興味深い事実は、img のvertical-align: middle を削除すると、次のようになります:

まだ中央にあります!本当に中心になっているのでしょうか？

画像が少し上に移動し、垂直方向の中央に位置していないことがわかります。なぜ？理由が分かりません、ご存知でしたら教えていただけますか？

しかし、画像をテキストに変更すると:

CSS コード:

p{
    border: 3px solid #555;
    width: 300px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
span{
    vertical-align: middle;
}

HTML コード:

<p>
    <span>这是放在span中的文字，通过外层p设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</p>

レンダリング:

vertical-align: middle of span を削除すると、次のようになります。 :

違いがわかりますか?テキストの行間が狭くなります。コンピュータでコードを実行すると、これらのテキスト行が中央に移動され、図のように上に移動していないことがわかります。私も原因を調べ中ですのでご存知の方いらっしゃいましたら教えて下さい。

方法 2: フレキシブルボックスメソッド

CSS コード:

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

HTML コード:

<p class="container">
    <p class="inner">
        我在容器中水平垂直居中
    </p>
</p>

レンダリング:

align-items は垂直方向の中央揃えを制御し、justify-content は水平方向の中央揃えを制御します。これは CSS3 の新しいメソッドです。ブラウザのサポート状況は次のとおりです。

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

透明を使用して三角形を作成する

半透明の要素を設定する

以上が水平および垂直センタリング方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。