HTMLを垂直方向に中央揃えにする方法

フロントエンド開発者にとって、水平方向のセンタリングは比較的簡単ですが、垂直方向のセンタリングはより難しい問題です。この記事では、HTML で要素を垂直方向の中央に配置する方法について説明します。

一般に、HTML 要素を垂直方向の中央に配置する方法は数多くあります。以下では、これらの方法のいくつかを検討します。

1. Flexbox を使用する

Flexbox (フレキシブル ボックス レイアウト) は、CSS3 の最新のレイアウト方法の 1 つで、非常に便利なセンタリング方法です。 Flexbox の主なアイデアは、コンテナ内にフレキシブル ボックスを作成し、そのフレキシブル ボックスのプロパティを制御して水平方向と垂直方向のセンタリングを実現することです。 Flexbox を使用して垂直方向の中央揃えを実現する方法を見てみましょう:

HTML コード:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS コード:

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

この例では、最初に高さを設定します。 、コンテナの表示モードを Flexbox に設定し、justify-content プロパティと align-items プロパティを使用して要素を垂直方向と水平方向の中央に配置します。この方法は単純な垂直方向の中央揃えにのみ機能することに注意してください。

2. 絶対位置決めを使用する

絶対位置決めは一般的な方法です。絶対配置を使用すると、親要素に対して垂直方向に要素を中央に配置できます。具体的な実装は次のとおりです。

HTML コード:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS コード:

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

この例では、最初にコンテナに対して相対的な位置を設定し、次に、子要素の位置: 相対位置を設定し、位置: 絶対値を設定し、top プロパティを 50% に設定します。このようにして、子要素が垂直方向の中央に配置されます。ただし、この要素の上部には余分な空白が存在します。この空白を削除するには、transform:translateY(-50%) を使用します。これは、要素が正確に垂直方向の中央に配置されるように、高さの半分だけ上に変換します。

3. table-cell を使用する

table-cell を使用することは、HTML 要素を table 要素に変換することと同じです。 table-cell は単純な水平方向と垂直方向のセンタリングを実現できますが、比較的面倒です。具体的な実装方法を見てみましょう:

HTML コード:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS コード:

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

この例では、最初にコンテナの表示モードを次のように設定します。 table を作成し、コンテナの高さと幅を希望のサイズに設定し、 text-align を center (水平方向の中央揃え) に設定します。次に、子要素の表示モードを table-cell に設定し、vertical-align 属性によって垂直方向の中央揃えを実現します。

4. グリッド グリッド レイアウトを使用する

CSS グリッド レイアウトは、水平および垂直の中央揃えを含むグリッド タイプのレイアウトを迅速かつ効果的に作成できる強力なレイアウト方法です。具体的な実装は次のとおりです。

HTML コード:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS コード:

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

この例では、まず、display:grid を使用して、コンテナからグリッドへ グリッド レイアウト。次に、place-item プロパティを使用して、水平方向と垂直方向の中央に配置します。この方法はまだ比較的新しいため、ブラウザの互換性の点ではまだ十分ではありません。

概要

この記事では、HTML で垂直方向の中央揃えを実現する一般的な方法をいくつか検討しました。これらの方法にはそれぞれ長所と短所があり、実際の状況やニーズに応じて適切な方法を選択できます。単純な垂直方向の中央揃えの場合は、Flexbox または絶対配置を使用するのが比較的簡単で効果的ですが、より複雑なレイアウトの場合は、CSS グリッド レイアウトを使用できます。

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