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

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

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

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

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

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

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

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

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

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

<!--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;
            テキスト配置: 中央;
        }

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

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

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