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

CSS の上下中央揃えを実装する方法: 1. インライン要素の 1 行の行の高さをボックスの高さと同じに設定します。 2. 複数のインライン要素を使用して「display:table-cell」を設定します。 ; そして、vertical-align: middle;」で十分です。

CSS における上下の中央揃えは垂直方向の中央揃えです。CSS には要素に基づいて 3 つの垂直方向の中央揃え方法があります。つまり、単一行のインライン要素と複数行です。インライン要素とブロック要素の垂直方向のセンタリングについては、以下で詳しく紹介します。

単一行のインライン要素

単一行のインライン要素については、「行の高さをボックスの高さと同じにする」だけを設定する必要があります。行インライン要素;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

効果:

複数行インライン要素

##親要素に使用しますdisplay:table-cell;とvertical-align:middle;;を設定するだけです

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

私は複数行のインライン要素です私は複数行のインライン要素です 私は複数行のインライン要素です 私は複数行のインライン要素です 複数行のインライン要素です 私は複数行のインライン要素です 複数行のインライン要素です< ;/span>

効果:

# ブロックレベルの要素

オプション 1: 位置指定を使用する

最初に親要素を相対位置に設定し、次に子要素を絶対位置に設定し、子要素の先頭を設定します。 : 50%、つまり、子要素の左上隅を垂直にします Centered;

固定高さ: 絶対子要素のマージン上部を設定します: 要素の高さの -半分のピクセル; または、変換を設定します:translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定の高さ:css3 を使用新しい属性変換:translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

効果:

オプション 2: フレックスボックス レイアウトを使用して実装します (高さは可変です。すべて OK)

##フレックスボックス レイアウトを使用すると、属性表示を追加するだけで済みます。 flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

を、処理対象のブロック要素の親要素に移動します。効果:

関連チュートリアル: CSS ビデオ チュートリアル

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