HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文

馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います。そこで、水平方向と垂直方向の中央揃えによく使用されるいくつかの方法をまとめておきます。

最初の方法

<!--html ボックス コード-->
<!--水平と垂直の中央-->

<div class="Centered1">
    <p>d最初のタイプ</p>
</div>

<!-css スタイル部分-->
   .中央揃え1{
            背景色: #800070;
            幅: 100%;
            高さ:500px;
            位置: 相対的;
        }
    .Centered1 p{
            幅: 200ピクセル;
            高さ: 200px;
            背景色: ディープピンク;
            行の高さ: 200px;
            テキスト配置: 中央;
            位置: 絶対;
            左: 0;
            下部: 0;
            右:0;
            上: 0;
            マージン: 自動;
        }

2番目の方法

<!--html ボックス コード-->
<!--水平と垂直の中央-->

<div class="Centered2">
    <p>d2番目のタイプ</p>
</div>

<!-css スタイル部分-->
/*2番目の方法は水平と垂直の中央揃えです*/
    .Centered2{
            背景色: #ef8518;
            幅: 100%;
            高さ: 500px;
            位置: 相対的;
        }
    .Centered2 p {
            位置: 絶対;
            幅: 200ピクセル;
            高さ: 200px;
            背景色:赤;
            行の高さ: 200px;
            テキスト配置: 中央;
            左: 50%;
            上位:50%;
            左マージン:-100px;
            上マージン: -100px;
        }

3番目の方法

<!--html ボックス コード-->
<!--水平と垂直の中央-->

<div class="Centered3">
    <p>d3番目のタイプ</p>
</div>

<!-css スタイル部分-->
/*3番目の方法は水平と垂直の中央揃えです*/
    .Centered3{
            背景色: 薄灰色;
            幅: 100%;
            高さ: 500px;
            位置: 相対的;
        }
    .Centered3 p {
            位置: 絶対;
            幅: 200ピクセル;
            高さ: 200px;
            背景色:ダークオレンジ;
            行の高さ: 200px;
            テキスト配置: 中央;
            左: 50%;
            上位: 50%;
            変換:translate(-50%,-50%);
        }

4番目の方法

<!--html ボックス コード-->
<!--水平と垂直の中央-->

<div class="Centered4">
    <p>d第4のタイプ</p>
</div>

<!-css スタイル部分-->
/*4番目の方法は、水平および垂直の中央揃え、古いバージョンのフレックスレイアウトです*/
    .中央揃え4{
            背景色: #FF4444;
            幅: 100%;
            高さ: 500px;
            ディスプレイ: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: 中央;
        }
    .Centered4 p {
            幅: 200ピクセル;
            高さ: 200px;
            背景色:cadetblue;
            行の高さ: 200px;
            テキスト配置: 中央;
        }

5番目の方法

<!--html ボックス コード-->
<!--水平と垂直の中央-->

<div class="Centered5">
    <p>d 第 5 タイプ</p>
</div>

<!-css スタイル部分-->
/*5番目の方法は、水平と垂直の中央揃えです。flexの新しいバージョンでは、水平と垂直の中央揃えになります*/
    .中央揃え5{
            背景色: ダークスレートブルー;
            幅: 100%;
            高さ: 500px;
            ディスプレイ: フレックス;
            コンテンツを中央揃えにする。
            アイテムの位置を中央揃えにします。
        }
    .Centered5 p {
            幅: 200ピクセル;
            高さ: 200px;
            背景色:フクシア;
            行の高さ: 200px;
            テキスト配置: 中央;
        }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Mysql のデッドロックの表示とデッドロックの除去の詳細な説明

>>: dockerエラーの原因分析終了しました (1) 4分前