CSSで垂直方向の中央揃えを実現する方法

フロントエンド開発では、要素を垂直方向に中央揃えにすることが非常に一般的な要件です。一部の初心者にとって、これは非常に面倒なことかもしれません。しかし、実際には CSS を使用して垂直方向の中央揃えを実現する方法は数多くありますので、以下ではより実用的な方法をいくつか紹介します。

方法 1: 絶対位置マージン:auto

これは比較的一般的な方法で、CSS の絶対位置機能を使用して、top と left の値を設定し、 margin 垂直方向のセンタリングを実現するには、auto に設定します。

まず、絶対配置を使用して要素を中央に配置する必要があります:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其它样式 */
}

次に、マージンを自動に設定して水平方向の中央揃えを実現します:

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  /* 其它样式 */
}

これこの方法の利点は、理解と実装が比較的簡単で、互換性も非常に高いことです。ただし、これは垂直方向の中央に配置したい要素の高さがわかっている場合にのみ機能することに注意してください。

方法 2: フレックス レイアウト

フレックス レイアウトは、CSS3 で新しく追加されたレイアウト モードです。垂直方向のセンタリングが容易になります。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 其它样式 */
}

この方法の利点は、非常に便利で直感的であり、互換性が比較的良好であることです。ただし、古いバージョンのブラウザと互換性を持たせる必要がある場合には、互換処理を追加する必要があることに注意してください。

方法 3: テーブル レイアウト

テーブル レイアウトも古い CSS レイアウト方法で、垂直方向の中央揃えを実現するために使用することもできます。

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  /* 其它样式 */
}

この方法の利点は、互換性が高く、実装が簡単であることです。ただし、すべてのシナリオに適しているわけではなく、高い適応性や柔軟性が必要な場合には問題が発生する可能性があることに注意してください。

方法 4: 行の高さ

行の高さを使用して垂直方向のセンタリングを実現するという比較的単純な方法もあります。

.parent {
  height: 300px; /* 定义容器高度 */
  line-height: 300px; /* 容器高度与line-height相同，使文本垂直居中 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
  /* 其它样式 */
}

この方法の利点は、非常にシンプルで互換性が高いことです。ただし、これはインライン要素またはインライン ブロック要素にのみ適用され、垂直方向に中央揃えのテキスト シナリオにのみ適用されることに注意してください。

概要

上記では、垂直方向の中央揃えを実現するための一般的な CSS メソッドをいくつか紹介しました。さまざまなシナリオに適したさまざまなメソッドがあり、実際のニーズに応じて選択する必要があります。また、垂直方向のセンタリングを実現するには、複数の方法の組み合わせが必要になる場合があることにも注意してください。この記事が、垂直方向のセンタリングをより簡単に実現するのに役立つことを願っています。

以上がCSSで垂直方向の中央揃えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。