CSSで上下中央揃えにする方法-フロントエンドQ&A-php.cn

CSSで上下中央揃えにする方法

PHPz

リリース： 2023-04-24 09:30:05

オリジナル

22894 人が閲覧しました

CSS は Web デザインに使用される言語であり、Web ページのレイアウトやスタイル設定に広く使用されています。 Web デザインでは、上下中央のレイアウトをどのように実現するかが非常に一般的な問題になります。この記事では、CSS で上下の中央揃えの効果を簡単に実現できるいくつかの方法を紹介します。

方法 1: display:flex を使用する

display:flex は CSS3 の新しいレイアウトメソッドであり、さまざまな複雑なレイアウト効果をすばやく実現できます。上下をセンタリングする効果を得るために使用することもできます。

HTML コード:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

ログイン後にコピー

CSS コード:

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.child {
  text-align: center;
}

ログイン後にコピー

メソッド分析:

display:flex を使用して上下の中央揃えを実現します。まず、次のことを行う必要があります。親要素を設定します。フレックスレイアウトの場合は、justify-content:center プロパティと align-items:center プロパティを設定して、それぞれ水平方向と垂直方向の中央揃え効果を実現します。

上記のコードでは、親要素の高さは 400px に設定されていますが、必要に応じて調整できます。子要素の text-align:center 属性を使用すると、テキストコンテンツを水平方向に中央揃えにすることができます。

方法 2:position:absolute を使用する

position:absolute を使用すると、上下を中央揃えにする効果も得られます。ただし、要素の margin-top プロパティと margin-bottom プロパティを設定する必要があるため、この方法は高さが既知の要素に適していることに注意してください。

HTML コード:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

ログイン後にコピー

CSS コード:

.parent {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

ログイン後にコピー

メソッド分析:

position:absolute を使用して上下の中央揃えを実現します。まず、次のことを行う必要があります。親要素をposition:relativeに設定してから、子要素を親要素に対して相対的に配置できるように、子要素のposition属性をabsoluteに設定します。次に、top:50% を使用して、子要素の上端を親要素の中央に移動します。ただし、子要素の位置を調整する必要があります。変換では、translateY(-50%) を使用できます。要素は高さの 50% だけ上に移動され、上下に中央揃えの効果が得られます。

上記のコードでは、親要素の高さを 400px に設定していますが、これはデモ用であり、実際のアプリケーションでは状況に応じて調整する必要があります。

方法 3: table-cell を使用する

CSS では、table-cell は表のセルのレイアウト方法であり、あまり一般的には使用されませんが、より正確なレイアウトを実現できます。

HTML コード:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

ログイン後にコピー

CSS コード:

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 400px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

ログイン後にコピー

メソッド分析:

表セルを使用して上下の中央揃えを実現します。変更する必要があります。親要素の表示属性を table-cell に設定し、text-align:center 属性とvertical-align:middle 属性を設定して、それぞれ水平方向と垂直方向の中央揃え効果を実現します。親要素の高さを設定する必要があることに注意してください。設定しないと、上下の中央揃えが実現できません。

子要素の表示属性は inline-block に設定する必要があり、子要素が親要素に対して垂直方向の中央に配置されるように、vertical-align:middle 属性も設定する必要があります。この方法の利点は、より正確なレイアウトを実現でき、高さが既知のさまざまな要素に適していることです。

要約すると、上下のセンタリング効果を実現するには多くの方法があり、適用できる状況も異なります。特定のニーズに基づいて、適切な実装方法を選択できます。

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