CSS で水平方向および垂直方向の中央揃えを行うためのいくつかの方法

トピックに直接アクセスしてください!

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 コード:

れーい

レンダリング:

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

方法 2: マイナスマージンメソッド

CSS コード:

<p>
   <img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"   alt="CSS で水平方向および垂直方向の中央揃えを行うためのいくつかの方法" >
</p>

HTML コード:

.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的一半*/
 }

レンダリング:

ここでは、最初に top:50 % を使用しますそして left:50% は内部座標の原点 (左上隅) をコンテナーの中心に移動し、負のマージンを使用して幅の半分だけ左にオフセットし、次に高さの半分だけ上にオフセットします。内側の中心点がコンテナの中心点と揃うようにします。

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

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

CSS コード:

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

HTML コード:

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

レンダリング:

p上記のvertical-align: middleは垂直方向のセンタリングを制御し、text-align: centerは水平方向を制御します。興味深い事実は、img のvertical-align: middle を削除すると、次のようになります:

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

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

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

CSS コード:

<p>
    <img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"   alt="CSS で水平方向および垂直方向の中央揃えを行うためのいくつかの方法" >
</p>

HTML コード:

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

レンダリング:

-align: 後真ん中を削除すると、次のようになります:

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

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

CSS コード:

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

HTML コード:

.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;
 }

レンダリング:

align-items は垂直方向の中央揃え、両端揃えを制御します。コンテンツは水平方向のセンタリングを制御します。これは CSS3 の新しいメソッドです。ブラウザのサポート状況は次のとおりです。

以上が、皆様の学習に役立つことを願っております。 PHPの中国語サイトです。

CSS の水平方向および垂直方向の中央揃えのいくつかの方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。