CSSの水平方向と垂直方向の中央揃えの方法は何ですか? (コード例)

この記事では、CSS の水平方向と垂直方向の中央揃えの方法について説明します。 (コード例) は参考になると思います。

垂直方向のセンタリングの純粋な CSS メソッド

1. 位置に基づく: 絶対 (ただし、絶対位置はドキュメント フローから切り離され、兄弟要素には適していません) )

1. 位置: 上: 50%; マージン-左: -50 ピクセル; : 絶対; 上 : 0;右: 0;下: 0;左: 0;

上記の 2 つの div サイズは、transform:translate (-100px,-100px) です。 ; 位置: 絶対; 上: 50%;

2. サイズが不明瞭です。

#4。 ;

#5. 表示: テーブル (ページ全体のレイアウトが崩れます)

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

       <div class="wrapper">
        
    <div class="box">adfagagafajkfhla</div>
   
     </div>

上記は CSS を水平方向と垂直方向に中央揃えにする方法です。 (コード例) 完全な紹介。

CSS ビデオ チュートリアル

について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

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