CSS での水平方向と垂直方向の中央揃えの一般的な実装方法は何ですか? CSS での 3 つの一般的な水平方向および垂直方向の中央揃え方法

この記事では、CSS で水平方向と垂直方向の中央揃えを実現する一般的な方法を紹介します。 CSS でよく使われる 3 つの水平方向および垂直方向の中央揃え方法は、参考にしていただければ幸いです。

子要素の幅と高さがわからない場合、子要素の水平方向と垂直方向の中央揃えを実現するにはどうすればよいですか? いくつかの方法があります:

1. 配置と変換を使用して実現します

HTML と CSSコードは次のとおりです:

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

この実装の核心はコメント部分にあります。相対配置の場合、top と left は親要素の高さと幅を基準にして計算され、transform は自身の幅と高さを基準にして計算されます。 ; 効果は次のとおりです:

2、次のようにテーブルセルレイアウトを使用して

HTMLとCSSコードを実装します:

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

親要素はテーブルレイアウトを設定し、子要素はテーブルに設定されます。 -セルのレイアウト。次に、子要素の垂直方向と水平方向の中央揃えを実現します。効果は次のとおりです。

3. フレックス レイアウトを使用して、次の

HTML および CSS コードを実現します。

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

効果は次のとおりです。

おすすめ関連記事：

CSSでテーブルを使う2つの方法（例）

複数列レイアウトの概念とは？ CSSマルチカラムレイアウトの応用（サンプルコード）

以上がCSS での水平方向と垂直方向の中央揃えの一般的な実装方法は何ですか? CSS での 3 つの一般的な水平方向および垂直方向の中央揃え方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。