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

要素を垂直方向に中央揃えにする方法: 1. "line-height" 属性を使用して、単一行のインライン要素の垂直方向の中央揃えを実現します。 2. フレックス レイアウトを使用して、垂直方向の中央揃えを実現します。 3. 「absolute」属性を使用します。ネガティブマージン」を実現するには、ブロックレベルの要素が垂直方向に中央に配置されます。

#垂直方向の中央揃え

1. 単一行のインライン要素は垂直方向の中央揃えになります

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2. 複数行のインライン要素を垂直方向に中央揃えにします

①フレックス レイアウトを使用します (フレックス)

フレックス レイアウトを使用して垂直方向の中央揃えを実現します。ここで、flex-direction: 列は主軸の方向を垂直方向として定義します。 。この方法には、古いブラウザとの互換性の問題があります。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②テーブル レイアウト (テーブル) を使用します

vertical-align: テーブル レイアウトの中央を使用して、子要素の垂直方向の中央揃えを実現します

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 ブロック レベルの要素を垂直方向に中央揃えにします。

①絶対的な負のマージン (高さと幅がわかっている) を使用します。

要素を上から 50% 絶対に配置し、高さをオフセットするように margin-top を設定します。要素の上向きの半分は達成できます。

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②絶対変換を使用する

垂直方向の中央揃えの要素の高さと幅が不明な場合は、CSS3 の変換属性を使用して Y 軸を 50% オフセットし、垂直方向の中央揃えを実現できます。 . .ただし、一部のブラウザには互換性の問題があります。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③flex align-items を使用する

フレックス レイアウトで align-items 属性を設定して、子要素を垂直方向の中央に配置します。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④table-cellvertical-align を使用する

親要素をテーブル セル表示に変換し ( や と同様)、vertical- を設定します。 align 属性は、表のセルの内容を垂直方向の中央に配置します。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

推奨学習: 「

フロントエンド ビデオ」

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