CSS で垂直方向の中央揃えを実現する 6 つの方法 (コード例)

この記事では、CSS で垂直方向の中央揃えを実現する 6 つの方法を紹介します (コード例)。困っている友人は参考にしていただければ幸いです。

html 構造

<p>
    <span>垂直居中</span></p>

デフォルトの CSS スタイル構造

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell

このメソッドは IE8、Firefox、Google と互換性があり、コンテンツの幅と高さは関係ありません。 。 注: IE8 には、IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 </td><th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}<p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/65cfcfdbc7e93d675d00fcd8bf2d6403-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p><span style="font-size: 18px"><strong><span style="color: #000000">display: flex が含まれます。 ; </span>, </strong> コンテンツの幅と高さは関係ありません。 Firefox および Google と互換性あり</span></p>
<p><span style="font-size: 18px"><span style="color: #000000"><span style="font-size: 14px"> 参照フレックス レイアウト: https://www.cnblogs.com/qingchunshiguang/p/8011103.html<strong><span style="font-size: 18px"> <span style="color: #000000"><span style="font-size: 14px"></span><pre class="brush:php;toolbar:false">.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. 絶対位置と負のマージン

このメソッドは IE8、Firefox、および Google と互換性があります。
コンテンツには幅と高さが必要です。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 絶対位置決めと 0

##このメソッドは と互換性があります。 IE8、Firefox、Google、content には幅と高さが必要です。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 絶対配置と変換

メソッド は IE8 と互換性がありませんが、IE9、Firefox、および Google と互換性があります。 コンテンツの幅と高さは関係ありません。

#

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

##6.

表示:フレックスとマージン:自動 ##コンテンツには幅と高さがあります:

は IE8 と互換性がありません、IE9、コンテンツに幅と高さがありません: は IE

と互換性がありません。幅と高さは両方とも Firefox および Google と互換性があります。 #

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

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