概要: CSS を使用して要素を垂直方向の中央に設定します

フロントエンドのシージエンジニアとして、Webページを作成するときにCSSの水平方向と垂直方向のセンタリングに遭遇したことがあると思いますが、特に垂直方向のセンタリングはさらに面倒です。この記事では、CSS を使用して要素の垂直方向の中央揃えを設定するための解決策を主に紹介します。これらの方法を使用すれば、それを必要とする友人はもう心配する必要がなくなります。

前書き

要素の垂直方向の中央揃えは、日常の Web ページのレイアウトでよく遭遇する問題でもあります。この記事では、CSS を使用して要素の垂直方向の中央揃えを設定する解決策を主に紹介します。さまざまな状況で、この問題に遭遇した友人にとってさまざまな解決策が役立つと思います。以下では多くを述べませんが、詳細を見てみましょう。

html code:

<p class="parent">
<p class="child">Text here</p>
</p>

子要素の垂直方向の中心を設定するので、いわゆる中心がどこにあるのかを知るには、親要素の高さを知る必要があります。中間位置で停止するには、中間位置がどこにあるかを知る前に、まずこの距離の長さを知る必要があります
高さと幅のすべてのパーセンテージは html,body {width: 100%;height: 100%;}そのような設定に基づいていることに注意してください。この設定がないと、.parent p の親要素は body になり、body の幅と高さを設定していないため、.parent p のアスペクト比はその効果を確認できない可能性があります。使用するときは、.parent p の親要素に幅と高さが設定されていることを確認する必要があります

(1) インラインテキストは垂直方向に中央揃えに配置されます

CSS コード:

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

(2 ) インライン非テキストの垂直方向の中央揃え (例として img を使用します)

html コード:

<p class="parent">
    <img src="image.png" alt="" />
</p>

css コード

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3 ) 高さが不明なブロックレベルの要素は垂直方向に中央揃えされます

html コード:

<p class="parent">
  <p class="child">
    <!--.child的高度未知,父元素要有高度-->
    sddvsds dfvsdvds
  </p>
</p>

最初のメソッド (パディングは必要ありません):

css コード:

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2 番目方法(変換なし):

css コード:

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

3 番目の方法 (パディングを追加する必要があります):

css コード:

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

4 番目の方法:

( display: table を使用します。このメソッドはインライン テキスト要素の中央揃えにも適しています):

css コード:

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

5 番目のメソッド (フレックス レイアウト、ここでは互換性を考慮する必要があります!)

css コード:

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4) 高さが既知のブロックレベルの要素は垂直方向に中央に配置されます

html コード:

<p class="parent">
  <p class="child">
    <!--.child的高度已知,父元素高度已知-->
    sddvsds dfvsdvds
  </p>
</p>

css コード:

上記は私です 現在発見され、個人的にいくつかの実行可能な方法をテストします、他の方法があるはずです🎜

以上が概要: CSS を使用して要素を垂直方向の中央に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。